jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax

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.

jquery-suggest-plugin-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 :

$("#inputBox1").jqEasySuggest({
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 :

ajax_file_path : "", // path to the file that returns the json encoded results
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 :

Author: Franck Pertegas

Share This Post On

2 Comments

  1. Sympa de mettre des solutions alternatives à jQueryUI.
    Toujours utile pour ceux qui veulent une solution simple et ponctuelle.
    S.

    Post a Reply
  2. 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 😉

    Post a Reply

Trackbacks/Pingbacks

  1. jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax | LudiBlog | Développement Web et sites | Scoop.it - [...] jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax | LudiBlog Me voici de retour avec la présentation…
  2. jCoverflip – Plugin jQuery – Le Coverflow simple et efficace | LudiBlog - [...] jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax [...]
  3. Développement web by ludikreation - Pearltrees - [...] jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax | LudiBlog keyupDelay : 200 , // add keyup…
  4. 62 plugins jQuery sur LudiBlog pour 2014 ! | LudiBlog - […] communautaires / Outils API / Jeux jQuery AutoSuggest Plugin pp3Diso jTwitter jQuery QRCode GMap gComplete […]

Submit a Comment

Votre adresse e-mail ne sera pas publiée.