Facebook-style jQuery autocomplete plugin

Im after the plugin performs autocomplete, for example, on facebook, you can select several elements - similar to how the tagging of stackoverflow problem works.

Here is a couple I came across:

Have you tried any of them? Were they easy to implement and configure?

+78
jquery jquery-plugins autocomplete
Jul 28 '09 at 3:30
source share
7 answers

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

I just went for it and it was very easy to implement using the asp.net page to output JSON (from the search options) Then theres just a few Javascript lines that you need to create (and settings)

$(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..." }); }); 
+84
Jul 28 '09 at 5:10
source share

It is very good! https://github.com/wuyuntao/jquery-autosuggest/

How to use it

Obviously, you need to make sure that you have the latest jQuery library (at less than 1.3) already loaded on your page. After that, it's really simple, just add the following code to your page (be sure to wrap your code in the jQuery ready function):

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

The line of code above applies AutoSuggest to the entire text type of the input elements on the page. Each of them will use the same data set. If you want to have multiple AutoSuggest fields on your page that use different datasets, make sure you select them separately. like this:

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

Doing the above allows you to pass in various parameters and various data sets. The following is an example of using AutoSuggest with a Data Object and various other 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"}); 
+28
May 09 '10 at 9:15
source share

This is the original jQuery autocomplete plugin before it was integrated into jQueryUI. If you want to serve only jQuery, but not the entire jQueryUI library, use this one. I have used this in the past and have been pleased with it.

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

+3
Oct 21 '10 at 17:34
source share

if you are looking for a user mention function like fb and tw, this is a good plugin http://podio.imtqy.com/jquery-mentions-input/

+3
May 29 '13 at 10:13
source share

I found this one. It seems reliable, well-groomed and responsive.

http://ivaynberg.imtqy.com/select2/

+1
Mar 10 '14 at 10:39
source share

I was impressed with the autosuggest devbridge . Highly customizable

0
Jul 17 '12 at 16:32
source share



All Articles