Facebook style JQuery autocomplete plugin
JqueryJquery PluginsAutocompleteJquery Problem Overview
Im after a plugin to do autocomplete like facebook does in that you can select multiple items - similar to how tagging a stackoverflow question works.
Here are a couple I ran into:
- http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete
- http://www.emposha.com/javascript/fcbkcomplete.html
- https://github.com/loopj/jquery-tokeninput
Have you tried any of these? Were they easy to implement and customize?
Jquery Solutions
Solution 1 - Jquery
https://github.com/loopj/jquery-tokeninput
I just had a go at this one and it was really easy to implement using an asp.net page to output the JSON (from the search params) Then theres just a few lines of Javascript you need to create it (and the 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..."
});
});
Solution 2 - Jquery
This one very good! https://github.com/wuyuntao/jquery-autosuggest/
> ## How To Use It
>
> Obviously you need to make sure you have the latest jQuery library (at
> least 1.3) already loaded in your page. After that it's really simple,
> just add the following code to your page (make sure to wrap your code
> in jQuery's ready function):
>
> $(function(){
> $("input[type=text]").autoSuggest(data);
> });
>
> The above line of code will apply AutoSuggest to all text type input
> elements on the page. Each one will be using the same set of Data. If
> you want to have multiple AutoSuggest fields on your page that use
> different sets of Data, make sure you select them separately. Like
> this:
>
> $(function(){
> $("div.someClass input").autoSuggest(data);
> $("#someID input").autoSuggest(other_data);
> });
>
> Doing the above will allow you to pass in different options and
> different Data sets. Below is an example of using AutoSuggest with a
> Data Object and other various 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"});
Solution 3 - Jquery
Here's what I've found, in no particular order:
Solution 4 - Jquery
if you are looking for user mentions feature like fb and tw, this is good plugin http://podio.github.io/jquery-mentions-input/
Solution 5 - Jquery
This is the original JQuery autocomplete plugin before it was integrated into JQueryUI. If you are looking to serve just JQuery but not the entire JQueryUI library, use this one. I have used this one in the past and have been happy with it.
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
Solution 6 - Jquery
I found this one. Seems robust, well-maintained and is responsive.
Solution 7 - Jquery
I was quite impressed with the devbridge autosuggest. Highly customizable