Facebook style JQuery autocomplete plugin

Question

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:

Have you tried any of these? Were they easy to implement and customize?

Which plugin did you used?? I am searching one which works fine in firefox and IE — San, Mar 10 '10 at 00:32
Warning: I have now implemented the JQuery-tokeninput in my project, and it seems that not only that one, but all of the others mentioned here, want to put the input field on a separate line. It seems not possible to put them on the same line i.e. `To: [..the field..]`. Perhaps absolute positioning, or using tables, is the solution, but I don't really like either, but maybe I am missing something.. — Adrian Smith, Aug 29 '11 at 14:06
JQuery-tokeninput is now having a facebook style which allows to put multiple tokens on the same line. See the demo. — Druvision, Nov 19 '13 at 14:22

score 84 · Accepted Answer · edited May 02 '11 at 00:03

84

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..."
    });
});

edited May 02 '11 at 00:03

Dave Jarvis

30,436
41
178
315

answered Jul 28 '09 at 05:10

dkarzon

7,868
9
48
61

It also appears to have FireFox bugs – AnApprentice Mar 20 '10 at 21:36
@AnApprentice: The latest version has many bug fixes. – Dave Jarvis May 02 '11 at 00:04
Not support create new tag on the fly yet – deerchao May 04 '11 at 03:47
loved this plugin but had to let it go for jqueryUI autocomplete since I needed on the fly support – Omnipresent May 29 '11 at 05:45
3

If you are using ASP.Net you can use my opensourse project ASPTokenInput which adds server side functionality to the jquery-tokeninput plugin https://github.com/harindaka/ASPTokenInput/wiki – Harindaka Jul 15 '11 at 13:06
I'm getting this error: TypeError: value is undefined Line 657. This is the code in line 657 function highlight_term(value, term) { return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "$1"); } What seems to be the problem? Help! – PinoyStackOverflower Sep 13 '12 at 06:44
I tested the demo (http://loopj.com/jquery-tokeninput/) in current versions of Chrome (on OSX), FF (onO OSX) and IE8. It worked in all of these. – Josh Nov 20 '12 at 18:08
Lacks Dynamic Source Support :(( – Jasim Muhammed Jan 06 '13 at 11:52
@jasimmk - Nope, a function can be passed in place of the source variable. – Chris Jun 08 '14 at 20:40
Most of plugins are outdated, many won't work with new JQuery versions. This one is best I found: http://timschlechter.github.io/bootstrap-tagsinput/examples/. – lubosdz Feb 11 '15 at 13:22
The Best!! exactly what i needed,I can't imagine my life without Stackoverflow. :) – Anand Singh Nov 19 '15 at 09:38

score 28 · Answer 2 · edited Sep 22 '16 at 20:29

28

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"});

edited Sep 22 '16 at 20:29

Tunaki

132,869
46
340
423

answered May 09 '10 at 09:15

webcgo

281
3
4

1

This is by far the best autosuggest plugin out there. It does not let the user add dupelicate records! – atmorell Jul 29 '10 at 07:30
2

feature rich, but tons of bugs. In the end, I created my own: http://the.deerchao.net/TagEditor – deerchao Nov 24 '11 at 07:50
@deerchao your work is very very nice ,just wanted to know if I can bound it with C# code ?I mean the tags ,also how to do it on the fly with web services ,thanks – user1074474 Jan 28 '12 at 21:06
@user1074474 By default, it only supports JSON data retrieved from a url. But there are all the source, you could customize it all you want. – deerchao Jan 30 '12 at 02:05
@deerchao did you have any update on this plugin? I'm trying to use but get this error `TypeError: $$.autocomplete is not a function [Break On This Error] close: function () {` any help? – ReynierPM Sep 04 '12 at 15:15
@ReynierPM Sorry I was on vacation. Have you figured out what's wrong? – deerchao Sep 13 '12 at 09:44
Yes @deerchao it's working now. Anyway thanks :) and I hope you've good vacations I need one too ... – ReynierPM Sep 13 '12 at 12:50

philfreo · Answer 3 · 2015-08-11T01:52:34.843

22

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

edited Aug 11 '15 at 01:52

answered Feb 21 '13 at 02:03

philfreo

41,941
26
128
141

nice collection, thanx. – Irfan DANISH Jun 06 '13 at 07:45
2

Which are the top 2 or 3? – user May 02 '14 at 08:07

score 4 · Answer 4 · answered May 29 '13 at 10:13

4

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

answered May 29 '13 at 10:13

vikas devde

11,691
10
35
42

score 3 · Answer 5 · answered Oct 21 '10 at 17:34

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/

score 1 · Answer 6 · answered Mar 10 '14 at 10:39

1

I found this one. Seems robust, well-maintained and is responsive.

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

answered Mar 10 '14 at 10:39

subeebot

271
2
2

score 0 · Answer 7 · answered Jul 17 '12 at 16:32

0

I was quite impressed with the devbridge autosuggest. Highly customizable

answered Jul 17 '12 at 16:32

andy boot

11,355
3
53
66

Facebook style JQuery autocomplete plugin

7 Answers7

How To Use It

Linked