Плагин автозаполнения JQuery в стиле Facebook

Я после плагина для автозаполнения, как это делает facebook, в котором вы можете выбрать несколько элементов - аналогично тому, как работает тегирование вопроса stackoverflow.

Вот пара, с которой я столкнулся:

Вы пробовали что-нибудь из этого? Было ли их легко реализовать и настроить?


person Luke Lowrey    schedule 28.07.2009    source источник
comment
Какой плагин вы использовали ?? Я ищу тот, который отлично работает в firefox и IE   -  person San    schedule 10.03.2010
comment
Предупреждение: теперь я реализовал JQuery-tokeninput в своем проекте, и кажется, что не только этот, но и все остальные, упомянутые здесь, хотят поместить поле ввода в отдельную строку. Кажется, невозможно поместить их в одну строку, т.е. To: [..the field..]. Возможно абсолютное позиционирование или использование таблиц - это решение, но мне это не очень нравится, но, может быть, мне что-то не хватает ...   -  person Adrian Smith    schedule 29.08.2011
comment
JQuery-tokeninput теперь имеет стиль facebook, который позволяет размещать несколько токенов в одной строке. Смотрите демо.   -  person Druvision    schedule 19.11.2013


Ответы (7)


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

Я только что попробовал это, и это было действительно легко реализовать с использованием страницы asp.net для вывода JSON (из параметров поиска). Затем вам нужно создать всего несколько строк Javascript (и настройки)

$(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..."
    });
});
person dkarzon    schedule 28.07.2009
comment
Также, похоже, есть ошибки FireFox - person AnApprentice; 21.03.2010
comment
@AnApprentice: в последней версии исправлено множество ошибок. - person Dave Jarvis; 02.05.2011
comment
Пока не поддерживает создание нового тега на лету - person deerchao; 04.05.2011
comment
мне понравился этот плагин, но мне пришлось отпустить его для автозаполнения jqueryUI, так как мне нужна была поддержка на лету - person Omnipresent; 29.05.2011
comment
Если вы используете ASP.Net, вы можете использовать мой проект с открытым курсом ASPTokenInput, который добавляет функциональность на стороне сервера к плагину jquery-tokeninput github.com/harindaka/ASPTokenInput/wiki - person Harindaka; 15.07.2011
comment
Я получаю эту ошибку: TypeError: value is undefined Строка 657. Это код в строке 657 function highlight_term (value, term) {return value.replace (new RegExp ((?! [^ &;] +;) ( ?! ‹[^‹ ›] *) (+ Term +) (?! [^‹ ›] *›) (?! [^ &;] +;), Gi), ‹b› $ 1 ‹/b›) ; } В чем проблема? Помощь! - person PinoyStackOverflower; 13.09.2012
comment
Я протестировал демонстрацию (loopj.com/jquery-tokeninput) в текущих версиях Chrome (на OSX ), FF (onO OSX) и IE8. Это сработало во всех этих случаях. - person Josh; 20.11.2012
comment
Отсутствует поддержка динамических источников: (( - person Jasim Muhammed; 06.01.2013
comment
@jasimmk - Нет, вместо исходной переменной можно передать функцию. - person Chris; 09.06.2014
comment
Большинство плагинов устарели, многие не будут работать с новыми версиями JQuery. Лучшее, что я нашел: timschlechter.github.io/bootstrap-tagsinput/examples. - person lubosdz; 11.02.2015
comment
Самый лучший!! именно то, что мне нужно, я не могу представить свою жизнь без Stackoverflow. :) - person Anand Singh; 19.11.2015

Это очень хорошо! https://github.com/wuyuntao/jquery-autosuggest/

Как это использовать

Очевидно, вам нужно убедиться, что на вашей странице уже загружена последняя версия библиотеки jQuery (как минимум 1.3). После этого это действительно просто, просто добавьте следующий код на свою страницу (не забудьте обернуть свой код функцией готовности jQuery):

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

Вышеупомянутая строка кода применит AutoSuggest ко всем элементам текстового типа input на странице. Каждый будет использовать один и тот же набор данных. Если вы хотите, чтобы на вашей странице было несколько полей AutoSuggest, которые используют разные наборы данных, убедитесь, что вы выбрали их отдельно. Нравится:

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

Выполнение вышеуказанного позволит вам переходить к различным параметрам и различным наборам данных. Ниже приведен пример использования AutoSuggest с объектом данных и другими различными параметрами:

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"});
person webcgo    schedule 09.05.2010
comment
Это, безусловно, лучший плагин для автозаполнения. Это не позволяет пользователю добавлять повторяющиеся записи! - person atmorell; 29.07.2010
comment
многофункциональный, но с множеством ошибок. В конце концов, я создал свой собственный: the.deerchao.net/TagEditor - person deerchao; 24.11.2011
comment
@deerchao, ваша работа очень-очень хорошая, просто хотел знать, могу ли я связать ее с кодом C #? Я имею в виду теги, а также как делать это на лету с помощью веб-сервисов, спасибо - person user1074474; 29.01.2012
comment
@ user1074474 По умолчанию он поддерживает только данные JSON, полученные с URL-адреса. Но есть все исходники, вы можете настроить все, что захотите. - person deerchao; 30.01.2012
comment
@deerchao были ли у вас обновления этого плагина? Я пытаюсь использовать, но получаю эту ошибку TypeError: $$.autocomplete is not a function [Break On This Error] close: function () { есть помощь? - person ReynierPM; 04.09.2012
comment
@ReynierPM Извини, я был в отпуске. Вы поняли, в чем дело? - person deerchao; 13.09.2012
comment
Да @deerchao теперь работает. В любом случае спасибо :) и я надеюсь, что у вас хорошие каникулы, мне тоже нужно ... - person ReynierPM; 13.09.2012

Вот что я нашел в произвольном порядке:

person philfreo    schedule 21.02.2013
comment
хорошая коллекция, спасибо. - person Irfan DANISH; 06.06.2013
comment
Какие 2 или 3 лучших? - person user; 02.05.2014

если вы ищете функцию упоминания пользователей, такую ​​как fb и tw, это хороший плагин http://podio.github.io/jquery-mentions-input/

person vikas devde    schedule 29.05.2013

Это оригинальный плагин автозаполнения JQuery до того, как он был интегрирован в JQueryUI. Если вы хотите обслуживать только JQuery, а не всю библиотеку JQueryUI, используйте эту. Я использовал это в прошлом и был доволен им.

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

person James Lawruk    schedule 21.10.2010

Я нашел это. Кажется надежным, ухоженным и отзывчивым.

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

person subeebot    schedule 10.03.2014

Я был очень впечатлен автоматическим предложением devbridge. Полностью настраиваемый

person andy boot    schedule 17.07.2012