Плагін автозаповнення JQuery у стилі Facebook [закрито]

78

Я після того, як плагін робить автозаповнення, як це робить facebook, оскільки ви можете вибрати декілька елементів - подібно до того, як працює тегування запитання stackoverflow.

Ось пара, з якою я зіткнувся:

Ви пробували щось із цього? Чи легко їх було впровадити та налаштувати?

jquery  jquery-plugins  autocomplete 
— Люк Лоурі
джерело
Який плагін ви використовували ?? Я шукаю той, який чудово працює у firefox та IE
— San
Попередження: Зараз я застосував JQuery-tokeninput у своєму проекті, і, здається, не лише той, але й усі інші, згадані тут, хочуть помістити поле введення в окремий рядок. Здається, неможливо поставити їх на одному рядку, тобто To: [..the field..]. Можливо, абсолютне позиціонування або використання таблиць є рішенням, але мені теж не подобається, але, можливо, мені чогось не вистачає ..
— Адріан Сміт
JQuery-tokeninput тепер має стиль facebook, який дозволяє розміщувати кілька токенів в одному рядку. Подивіться демо.
— Druvision

Відповіді:

84

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..."
    });
});
— дкарзон
джерело
У ньому також є помилки FireFox
— AnApprentice
@AnApprentice: Остання версія містить багато виправлень.
— Дейв Джарвіс,
Поки що не підтримується створення нового тегу на льоту
— deerchao
сподобався цей плагін, але змушений був відпустити його для автозаповнення jqueryUI, оскільки мені потрібна була підтримка на льоту
— Всюди
3
Якщо ви використовуєте ASP.Net, ви можете використовувати мій проект відкритого курсу ASPTokenInput, який додає функціональність сторони сервера до плагіна jquery-tokeninput github.com/harindaka/ASPTokenInput/wiki
— Harindaka
28

Цей дуже хороший! 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"});
— webcgo
джерело
1
Це на сьогоднішній день найкращий плагін для автосугесту. Це не дозволяє користувачеві додавати дублікати записів!
— atmosrell
2
багатофункціональний, але безліч помилок. Врешті-решт, я створив свій власний: the.deerchao.net/TagEditor
— deerchao
@deerchao, твоя робота дуже приємна, я просто хотів знати, чи можу я зв'язати її кодом C #? Я маю на увазі теги, а також те, як це зробити на льоту за допомогою веб-сервісів, спасибі
— user1074474
@ user1074474 За замовчуванням він підтримує лише дані JSON, отримані з URL-адреси. Але є всі джерела, ви можете налаштувати все, що завгодно.
— deerchao
@deerchao у вас було оновлення цього плагіна? Я намагаюся використовувати, але отримати цю помилку TypeError: $$.autocomplete is not a function [Break On This Error] close: function () {будь-яку допомогу?
— ReynierPM
22

Ось те, що я знайшов, не в особливому порядку:

— філфрео
джерело
приємна колекція, дякую.
— Irfan DANISH
2
Які найкращі 2 чи 3?
— користувач
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.