Plugin d’auto-complétion de style Facebook JQuery

Im après un plug-in à faire la saisie semi-automatique comme le fait Facebook en ce sens que vous pouvez sélectionner plusieurs éléments – similaire à la façon dont le marquage d’une question de stackoverflow fonctionne.

Voici un couple que j’ai rencontré:

  • http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete
  • http://www.emposha.com/javascript/fcbkcomplete.html
  • https://github.com/loopj/jquery-tokeninput

Avez-vous essayé l’un de ces? Étaient-ils faciles à mettre en œuvre et à personnaliser?

https://github.com/loopj/jquery-tokeninput

Je viens de faire un tour sur celui-ci et il était vraiment facile à mettre en œuvre en utilisant une page asp.net pour sortir le JSON (à partir des parameters de recherche). Ensuite, il ne rest que quelques lignes de Javascript nécessaires (et les parameters)

 $(document).ready(function() { $("#Users").tokenInput("../Services/Job/UnassignedUsers.aspx?p=<%= projectID %>&j=<%= jobID %>", { hintText: "Begin typing the user name of the person you wish to assign.", noResultsText: "No results", searchingText: "Searching..." }); }); 

Celui-ci très bien! https://github.com/wuyuntao/jquery-autosuggest/

Comment l’utiliser

Évidemment, vous devez vous assurer que la dernière bibliothèque jQuery (au moins 1.3) est déjà chargée dans votre page. Après cela, c’est vraiment simple, ajoutez simplement le code suivant à votre page (veillez à envelopper votre code dans la fonction ready de jQuery):

 $(function(){ $("input[type=text]").autoSuggest(data); }); 

La ligne de code ci-dessus appliquera AutoSuggest à tous input éléments d’ input type texte de la page. Chacun utilisera le même dataset. Si vous souhaitez avoir plusieurs champs AutoSuggest sur votre page qui utilisent des ensembles de données différents, veillez à les sélectionner séparément. Comme ça:

 $(function(){ $("div.someClass input").autoSuggest(data); $("#someID input").autoSuggest(other_data); }); 

Faire ce qui précède vous permettra de transmettre différentes options et différents ensembles de données. Vous trouverez ci-dessous un exemple d’utilisation d’AutoSuggest avec un object de données et d’autres options:

 var data = {items: [ {value: "21", name: "Mick Jagger"}, {value: "43", name: "Johnny Storm"}, {value: "46", name: "Richard Hatch"}, {value: "54", name: "Kelly Slater"}, {value: "55", name: "Rudy Hamilton"}, {value: "79", name: "Michael Jordan"} ]}; $("input[type=text]").autoSuggest(data.items, {selectedItemProp: "name", searchObjProps: "name"}); 

Voici ce que j’ai trouvé, sans ordre particulier:

  • Selectize.js
  • jQuery Tokeninput – GitHub
  • Sélectionnez 2
  • TextboxList
  • Tag-it – GitHub
  • TextExt
  • FCBKcomplete – GitHub – démo
  • jQuery Facebook Autocomplete
  • jquery-autosuggest – démo drewwilson
  • Balises de pins
  • tagedit
  • Tagit
  • jQuery Tags Entrée
  • Mots clés
  • jquery.token-field

Si vous recherchez des fonctionnalités de type utilisateur comme fb et tw, c’est un bon plugin http://podio.github.io/jquery-mentions-input/

Ceci est le plug-in d’autocomplétion JQuery d’origine avant qu’il ne soit intégré à JQueryUI. Si vous cherchez à ne servir que JQuery mais pas toute la bibliothèque JQueryUI, utilisez celle-ci. J’ai utilisé celui-ci dans le passé et en ai été heureux.

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete /

J’ai trouvé celui-ci. Semble robuste, bien entretenu et réactif.

http://ivaynberg.github.io/select2/

J’ai été très impressionné par l’autosuggest devbridge . Hautement personnalisable