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
 TECHDAYS PARIS 2010 : ADMINISTRATION SHAREPOINT 2010TECHDAYS PARIS 2010 : ADMINISTRATION SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Patrick Guimonet et Benoit Hamet Cette session traitera des différents points exigés durant les taches d'administration : Planification (architecture, hébergement, authentification, .) Opération e...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [TECHDAYS 2010] #03 - WEB CONTENT MANAGEMENT SOUS SHAREPOINT 2010[TECHDAYS 2010] #03 - WEB CONTENT MANAGEMENT SOUS SHAREPOINT 2010 par pierre
Stephane Cordonnier de MCNext nous présente les fonctionnalités Web Content Management (WCM) sous SharePoint 2010. Qu'est-ce que le WCM ECM, GED, RM, WCM c'est quoi Plateforme SharePoint Versions SharePoint 2010 SharePoint Fondation...
Cliquez pour lire la suite de l'article par pierre [DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE[DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE par tja
C'est le dernier principe des principes du Design Orienté Objet (The Principles of Object Oriented Design) fondés par Robert C. Martin plus connu sous le pseudonyme d'Uncle Bob.
l'image empruntée de LosTechies.
Je ne traite pas les principes dans...
Cliquez pour lire la suite de l'article par tja TECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURSTECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURS par ROMELARD Fabrice
Animé par: Laurent Cotton Le développement dans SharePoint 2010 passe par plusieurs axes qui seront évoqués dans cette session, mais plus particulièrement les développements simples lié au besoin Business Business Connectivity Services Ce BCS es...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOURTECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice
Cette session est la dernière pleinière de ces 3 jours de TechDays Paris 2010. Généralement, cette troisième journée est plus axée sur l'avenir vu par Microsoft. Après un retour sur l'avenir vu par la Science Fiction ou par ...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Forum
 PETITE HORLOGEPETITE HORLOGE par tatillon
Cliquez pour lire la suite par tatillon
Logiciels
 DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|