Facebook style jQuery autocomplete plugin [zamknięty]

Im po plugin zrobić autouzupełnianie jak facebook robi w tym można wybrać wiele elementów-podobne do tego, jak tagowanie pytanie stoskoverflow działa.

Oto kilka, na które wpadłem:

Próbowałeś któregoś z nich? Były łatwe do wdrożyć i dostosować?

Author: Dave Jarvis, 2009-07-28
Source

7 answers

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

Po prostu miałem go na ten jeden i to było naprawdę łatwe do wdrożenia za pomocą asp.net strona do wyjścia JSON (z wyszukiwania params) Następnie jest tylko kilka linijek Javascript, które musisz utworzyć (i ustawienia)

$(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
Author: dkarzon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-02 00:03:32

Ten jest bardzo dobry! https://github.com/wuyuntao/jquery-autosuggest/

Jak Go Używać

Oczywiście musisz się upewnić, że masz najnowszą bibliotekę jQuery (na co najmniej 1.3) już załadowany na swojej stronie. Potem to naprawdę proste, po prostu dodaj poniższy kod do swojej strony (pamiętaj, aby owinąć kod w jQuery ' s ready function): 

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

Powyższy wiersz kodu zastosuje Autosugest do wszystkich typów tekstu input elementów na stronie. Każdy z nich będzie używał tego samego zestawu danych. Jeśli chcesz mieć na swojej stronie wiele pól Autosugest, które używają różne zestawy danych, upewnij się, że zaznaczasz je osobno. Jak to: 

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

Wykonanie powyższego pozwoli Ci przejść w różnych opcjach i różne zbiory danych. Poniżej przykład użycia Autosugest z Obiekt danych i inne różne opcje: 

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
Author: webcgo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-22 20:29:10
 22
Author: philfreo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-11 01:52:34

Jeśli szukasz funkcji, takich jak FB i tw, jest to dobra Wtyczka http://podio.github.io/jquery-mentions-input/

 4
Author: vikas devde,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-29 10:13:38

Jest to oryginalna wtyczka jQuery autocomplete, zanim została zintegrowana z JQueryUI. Jeśli chcesz obsługiwać tylko JQuery, ale nie całą bibliotekę JQueryUI, użyj tego. Używałem tego w przeszłości i byłem z niego zadowolony.

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

 3
Author: James Lawruk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-21 17:34:43

Znalazłem ten. Wydaje się solidny, zadbany i reaguje.

Http://ivaynberg.github.io/select2/

 1
Author: subeebot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-10 10:39:07

Byłem pod wrażeniem devbridge autosugest. Wysoce konfigurowalny

 0
Author: andy boot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-17 16:32:15