Facebook style JQuery autocomplete plugin [closed]

Solution 1:

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:

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:

Here's what I've found, in no particular order:

  • Selectize.js
  • jQuery Tokeninput -- GitHub
  • Select2
  • TextboxList
  • Tag-it -- GitHub
  • TextExt
  • FCBKcomplete -- GitHub -- demo
  • jQuery Facebook Autocomplete
  • jquery-autosuggest -- drewwilson demo
  • Pines Tags
  • tagedit
  • Tagit
  • jQuery Tags Input
  • Tags
  • jquery.token-field

Solution 4:

if you are looking for user mentions feature like fb and tw, this is good plugin http://podio.github.io/jquery-mentions-input/