Login/Register
Facebook style JQuery autocomplete plugin [closed]
Asked Answered
Solved jqueryjquery-pluginsautocomplete
W

7

78

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?

Wintergreen answered 28/7, 2009 at 3:30 Comment(3)
Which plugin did you used?? I am searching one which works fine in firefox and IE – Orangeism
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.. – Intercalation
JQuery-tokeninput is now having a facebook style which allows to put multiple tokens on the same line. See the demo. – Portion
B
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..."
    });
});
Beaubeauchamp answered 28/7, 2009 at 5:10 Comment(11)
It also appears to have FireFox bugs – Valenti
@AnApprentice: The latest version has many bug fixes. – Equate
Not support create new tag on the fly yet – Streamline
loved this plugin but had to let it go for jqueryUI autocomplete since I needed on the fly support – Alten
If you are using ASP.Net you can use my opensourse project ASPTokenInput which adds server side functionality to the jquery-tokeninput plugin github.com/harindaka/ASPTokenInput/wiki – Yean
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"), "<b>$1</b>"); } What seems to be the problem? Help! – Empathic
I tested the demo (loopj.com/jquery-tokeninput) in current versions of Chrome (on OSX), FF (onO OSX) and IE8. It worked in all of these. – Tegument
Lacks Dynamic Source Support :(( – Chattanooga
@jasimmk - Nope, a function can be passed in place of the source variable. – Skink
Most of plugins are outdated, many won't work with new JQuery versions. This one is best I found: timschlechter.github.io/bootstrap-tagsinput/examples. – Demagoguery
The Best!! exactly what i needed,I can't imagine my life without Stackoverflow. :) – Onstad
N
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"});
Ns answered 9/5, 2010 at 9:15 Comment(7)
This is by far the best autosuggest plugin out there. It does not let the user add dupelicate records! – Unformed
feature rich, but tons of bugs. In the end, I created my own: the.deerchao.net/TagEditor – Streamline
@Streamline 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 – Seasonseasonable
@Seasonseasonable By default, it only supports JSON data retrieved from a url. But there are all the source, you could customize it all you want. – Streamline
@Streamline 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? – Stotinka
@Stotinka Sorry I was on vacation. Have you figured out what's wrong? – Streamline
Yes @Streamline it's working now. Anyway thanks :) and I hope you've good vacations I need one too ... – Stotinka
Q
22

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

Quadrivial answered 21/2, 2013 at 2:3 Comment(2)
nice collection, thanx. – Shoreline
Which are the top 2 or 3? – Windpipe
E
4

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

Enswathe answered 29/5, 2013 at 10:13 Comment(0)
A
3

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/

Andradite answered 21/10, 2010 at 17:34 Comment(0)
N
1

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

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

Nannienanning answered 10/3, 2014 at 10:39 Comment(0)
A
0

I was quite impressed with the devbridge autosuggest. Highly customizable

Allpurpose answered 17/7, 2012 at 16:32 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.