Aide à la saisie - jQuery

 

A la saisie d'une lettre dans un champ de saisie (textarea ou input), le script propose, sous forme d'un menu déroulant, les 6 premiers résultats trouvés commençant par cette lettre (ou ces lettres si plusieurs lettres ont été saisies). Les résultats attendus se trouvant dans un fichier texte que l'on peut éventuellement générer à partir de la base de données

 

1. Ajouter dans le header, l'appel au script jquery.autocomplete.js et à la bibliothèque jQuery, ainsi que le script initialisant votre zone de saisie en la reliant avec un fichier texte (ici le fichier communes.txt contenant la liste alphabétique des communes de France) et enfin, les styles correspondant à la zone d'aide à la saisie

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript"> function initURLTextarea(){ $("#outter input").autocomplete({ wordCount:1, mode: "outter", on: { query: function(text,cb){ var words = []; for( var i=0; i<urls.length; i++ ){ if( urls[i].toLowerCase().indexOf(text.toLowerCase()) == 0 ) words.push(urls[i]); } cb(words); } } }); } var countries = []; function initContriesTextarea(){ $.ajax("communes.txt",{ success: function(data, textStatus, jqXHR){ countries = data.replace(/\r/g, "" ).split("\n"); $("input#ville").autocomplete({ wordCount:1, on: { query: function(text,cb){ var words = []; for( var i=0; i<countries.length; i++ ){ if( countries[i].toLowerCase().indexOf(text.toLowerCase()) == 0 ) words.push(countries2[i]); if( words.length > 5 ) break; } cb(words); } } }); } }); } $(document).ready(function(){ initContriesTextarea(); initURLTextarea(); }); </script> <style type="text/css"> ul.auto-list{ display:none; position:absolute; top:0px; left:0px; background: none repeat scroll 0 0 #F6F6F6; border: 1px solid #E5E5E5; padding:0;margin:0; list-style:none; } ul.auto-list>li:hover,ul.auto-list>li[data-selected=true]{ background-color:#319FFF; color:#fff; } ul.auto-list>li{ cursor:default; padding:2px; } mark{ background: none repeat scroll 0 0 transparent; font-weight: bold; text-decoration: underline; } </style>

2. Ajouter le champ avec la zone d'aide dans la page :

<input name="ville" id="ville" type="text" size="40" /> <div id="outter"></div>

3. Résultat :

Plan du site | Mentions légales | Bardamu?    ©2007-2018 Christophe Lemaire