Accueil > > > AJAX : COMPLETER AUTOMATIQUEMENT UN FORMULAIRE (<INPUT TYPE=TEXT>) PHP ET BASE MYSQL , À VOIR ABSOLUMENT !
 AJAX : COMPLETER AUTOMATIQUEMENT UN FORMULAIRE (<INPUT TYPE=TEXT>) PHP ET BASE MYSQL , À VOIR ABSOLUMENT !
 Information sur la source
 Description
Tout est dans le titre, ce script permet de proposer automatiquement une liste selon les lettres qu'on tappe. dans le zip vous trouverez aussi une classe pour la connexion mysql et l'extraction des données. PS: ceci est ma première source, donc merci de me noter et de mettre un commentaire, ca m'aidera a avancer :)
 Source
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Ajax Auto complete</title>
-
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript">
- function lookup(inputString) {
- if(inputString.length == 0) {
- // Hide the suggestion box.
- $('#suggestions').hide();
- } else {
- $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
- if(data.length >0) {
- $('#suggestions').show();
- $('#autoSuggestionsList').html(data);
- }
- });
- }
- } // lookup
-
- function fill(thisValue) {
- $('#inputString').val(thisValue);
- setTimeout("$('#suggestions').hide();", 200);
- }
- </script>
-
- <style type="text/css">
- body {
- font-family: Helvetica;
- font-size: 11px;
- color: #000;
- }
-
- h3 {
- margin: 0px;
- padding: 0px;
- }
-
- .suggestionsBox {
- position: relative;
- left: 30px;
- margin: 10px 0px 0px 0px;
- width: 200px;
- background-color: #212427;
- -moz-border-radius: 7px;
- -webkit-border-radius: 7px;
- border: 2px solid #000;
- color: #fff;
- }
-
- .suggestionList {
- margin: 0px;
- padding: 0px;
- }
-
- .suggestionList li {
-
- margin: 0px 0px 3px 0px;
- padding: 3px;
- cursor: pointer;
- }
-
- .suggestionList li:hover {
- background-color: #659CD8;
- }
- </style>
-
- </head>
-
- <body>
-
-
- <div>
- <form>
- <div>
- Entrez votre pays:
- <br />
- <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
- </div>
-
- <div class="suggestionsBox" id="suggestions" style="display: none;">
- <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
- <div class="suggestionList" id="autoSuggestionsList">
-
- </div>
- </div>
- </form>
- </div>
-
- </body>
- </html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto complete</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
</style>
</head>
<body>
<div>
<form>
<div>
Entrez votre pays:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
</body>
</html>
 Conclusion
Merci de laisser votre éval ;)
 Sources de la même categorie
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
Autocompletion Ajax sur plusieurs champs dans un formulaire [ par barney06 ]
Bonjour,Je suis entrain d'utiliser l'autocompletion (lorsque l'on tape une entrée dans un champs de formulaire, les résultats trouvés par l'entrée, s'
Formulaire dynamique [ par alphacrash ]
Salut à tous, je vous explique mon problème :Je récupère le contenu d'une chaîne, par exemple celle-ci :$chaine="<html><body><input typ
Passage de parametres d'un formulaire d'un popup à un formulaire d'un page parent [ par toomsbzh ]
Bon décidement je sais jamais où rééllement poster mes questions... BrefDésolé pour le titre du sujet extra long mais peut pas faire plus court.Donc t
La base de données mysql sur mambo [ par alexpoeuf ]
bonjour à tous, j'ai besoin de creer un formulaire qui sera directement envoyé sur mysql. j'ai crée un formulaire type, une base de do
ajax and listbox [ par nvinvinvi ]
j'ai un formulaire avec 2 listbox (catégorie/sous catégorie) la listbox sous catégorie est construite en fonction du choix fait dans la première. P
formulaire AJAX [ par TomSoyer ]
Bonjour à tous.Je suis programmeur débutant et j'aimerais bien faire un formulaire en AJAX avec des radio boutons et quand un clic sur 1 de ces radio
Formulaire Ajax [ par bibo06 ]
Bonjour, je n'ai jamais fais de script Ajax encore, mais j'ai besoin d'un formulaire interactif un peu spéciale.J'ai fait quelque recherche sur divers
Comment modifier une base de donnée Mysql avec AJAX [ par overstone ]
Bonjour,Je recherche un moyen simple pour gérer ma base de donnée avec AJAX J'ai réussi à créer mon interface à l'aide de PHP, tout marche parfaitemen
PopUp ajax lors de l'envoi de formulaire [ par newsmatique ]
Bonjour,j'ai un formulaire, qui m'envoi des données en GET sur la page traitement.php, je voudrais que lors de l'envoi de ce formulaire cela m'ouvre u
Problème formulaire [ par hourad ]
Bonjour à tous,J'ai un petit problème avec AJAX.Voilà, je l'utilise pour à chaque changement d'option dans une liste, ça change un formulaire en desso
|
Derniers Blogs
 [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|