Me voici de retour avec la présentation d’un autre plugin jQuery qui vous permettra d’offrir aux internautes qui visitent vos sites internet la possibilité d’avoir une liste de suggestion lors des entrées qu’ils commenceront à formuler dans vos boites de texte de formulaires. Un peu dans le même esprit que le célèbre moteur de recherche du géant Google.
Je vous présente donc jQuery AutoSuggest Plugin, qui permet la création de suggestion de mots comme une liste de choix dans vos boites de texte avec des appels Ajax.
Ce plugin jQuery d’auto-suggestion permet entre-autre :
– D’afficher toutes les données JSON sous une liste
– D’utiliser les flèches haut / bas pour faire défiler la liste
– D’utiliser « entrer » ou la « tabulation » pour sélectionner une valeur de la liste
– D’afficher une image de chargement (loading)
– De stocker l’ID de la valeur sélectionnée dans un champ distinct
– D’avoir des boîtes à suggestions multiples sur une seule page
– D’avoir un appel Ajax selon le nombre de caractères entrés, afin d’abaisser le nombre d’appels à la page Ajax
Des exemples PHP et ASP sont inclus dans le téléchargement de la démo.
L’utilisation se fait comme suis :
ajax_file_path: "php/ajax.php"
});
Là, on a demandé que l’auto-suggestion se fasse sur l’élément de formulaire avec l’ID inputBox1 et les suggestions seront établies depuis le fichier php/ajax.php.
C’est tout ce qu’il y a à faire pour la version simple. Voici toutes les options possibles :
min_keyword_length : 2, // min char length to trigger the ajax lookup
showLoadingImage : true, // boolean value to display a loading image in the textbox while typing
focus_color : "", // change the textbox border color on focus
keyupDelay : 200, // add keyup delay to prevent lookup until user has finished typing (lowers the numbers of ajax calls)
id_element : "", // optional id of the element (textbox, hidden textbox, etc.) to store the id of the lookup value
sql_match_type : "starts", // used in the sql LIKE clause. values are starts, ends, or contains
es_width : "auto", // width of the drop down suggest box. auto will automatically calculate the width of the selectors width
es_opacity : 0.95, // opacity of the drop down suggest box
es_max_results : 10, // max number of results to display in the list of suggestions
es_offset_left : 0, // drop down suggest box left offset position
es_offset_top : 0 // drop down suggest box top offset position
N’hésitez pas à télécharger le plugin jQuery et le tester, via ce lien
Retrouvez la démo ici.
Si vous avez des commentaires ou questions n’hésitez pas 
Articles qui peuvent vous intéresser :
- jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables
- jQuery Favicon Notifier – Plugin jQuery – Modifiez vos favicons à la volée via jQuery
- jQuery – Validation – Plugin de validation de formulaire
- jQuery – Compatibilité – Utiliser jQuery avec un autre Framework javascript
- Facebox – Plugin jQuery – Des lightbox style Facebook
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Sympa de mettre des solutions alternatives à jQueryUI.
Toujours utile pour ceux qui veulent une solution simple et ponctuelle.
S.
Merci Syndrael,
En effet, j’aime bien ce genre de plugin parce qu’en plus de proposer une alternative simple, il y a des exemples php et asp pour la démo qui permettent aux novices de comprendre et adapter le code, de plus, dans ces exemples de démo, l’auteur utilise PDO
[...] jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax | LudiBlog Me voici de retour avec la présentation d'un autre plugin jQuery qui vous permettra d'offrir aux internautes qui visitent vos sites internet la possibilit… Source: blog.ludikreation.com [...]
[...] jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax [...]
[...] jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax | LudiBlog keyupDelay : 200 , // add keyup delay to prevent lookup until user has finished typing (lowers the numbers of ajax calls) id_element : "" , // optional id of the element (textbox, hidden textbox, etc.) to store the id of the lookup value focus_color : "" , // change the textbox border color on focus Kaltura API's KalturaCE framework PHP/MySQL Bibliothèques / Frameworks [+] Frameworks PHP framework evocore php dirty quick tutorials Frameworks PHP framework rails instant hosting iphone php mySQL command download snippets objective-c cocoa pureMVC sentation tutoriel PureMvc fabrication DesignPatterns application introduction Date Visualisation simile unnamed Zend framework francophone Business set up accounting dobbs things Pluf supplément Community Edition company document email Tuto painting Sites généralistes scriptorium fichiers fiction Forms scripts refresh patterns design Web Programming video cassandra Apps online software directory Zend_Navigation navigation tricks tutoriel yahoo flash platform Web Dev flash hosting secure under Java développer proguard tools Php bibliothèques building divs edu comp gestion PHP grace rapid without Web Development design Web Development lightweight invaluable reference PHP Stuffin useful Frameworks & templating PHP smarty development source php prog functions home • contact • blog • fb • twitter to experience pearltrees activate javascript. [...]