Добавление значений в автозаполнение JQuery в режиме реального времени

Я делаю "ввод токена" флажок стиля с автозаполнением (пользователь вводит что-то, выбирает ответ, который добавляет «токен» в представление DOM).

Используя автозаполнение jQuery, можно ли добавить значения, которых нет вsource список после того, как пользователь вводит их в?

Например, источник выглядит так["Apples", "Oranges", "Bananas"], Пользователь вводит в"plums," при использовании текстового поля. Есть ли способ добавить «Сливы»? к списку источников, если пользователь так хочет? Я знаю, что естьselect а такжеchange события, которые я могу проверить, ноselect работает только в том случае, если есть что выбрать (в данном случае это не так), иchange потребует какой-то проверки тайм-аута, чтобы убедиться, что пользователь прекратил печатать.

И наоборот, есть ли другой плагин, который я мог бы использовать для выполнения этого поведения?

 j0869111 июн. 2012 г., 19:19
Не могли бы вы использовать событие keyup?
 Andrew Whitaker11 июн. 2012 г., 19:23
change должен работать здесь. Он включает тайм-аут после того, как человек прекратил печатать и ушел из поля. С какими проблемами вы столкнулись, когда пытались его использовать?

Ответы на вопрос(3)

Решение Вопроса

autocompleteсобытие изменения. Этот код предполагает наличие кнопки с идентификаторомadd это появляется, когда вы хотите добавить новый элемент в список. Он не появится, если пользователь выберет элемент из списка. Есть несколько настроек, которые можно сделать, но это подтверждение концепции должно сделать возможным:

var source = ["Apples", "Oranges", "Bananas"];

$(function () {
    $("#auto").autocomplete({
        source: function (request, response) {
            response($.ui.autocomplete.filter(source, request.term));
        },
        change: function (event, ui) {
            $("#add").toggle(!ui.item);
        }
    });

    $("#add").on("click", function () {
        source.push($("#auto").val());
        $(this).hide();
    });
});

Вот пример:http://jsfiddle.net/rmGqB/

Update: Похоже, я немного неправильно понял требование. Вы также можете нажать на результат, который автозаполнение будет заполнять список кандидатов и управлять видимость кнопки в зависимости от того, дали ли результаты поиска какие-либо точные совпадения:

var source = ["Apples", "Oranges", "Bananas"];

$(function () {
    $("#auto").autocomplete({
        source: function (request, response) {
            var result = $.ui.autocomplete.filter(source, request.term);

            $("#add").toggle($.inArray(request.term, result) < 0);

            response(result);
        }
    });

    $("#add").on("click", function () {
        source.push($("#auto").val());
        $(this).hide();
    });
});

Example: http://jsfiddle.net/VLLuJ/

 13 февр. 2014 г., 19:00
Ответ на этот вопрос был бы весьма полезным, хотя он кажется «вторым». превратился в пару лет сейчас.
 Kevin Whitaker13 июн. 2012 г., 18:03
Извините, я не думаю, что правильно передал идею. Требование состоит в том, что пользователь вводит термин, который вызывает автозаполнение. Если они не видят того, что им нужно, в доступном списке параметров, они могут как-то добавить термин (кнопка, нажатие клавиши ввода и т. Д.), Который помещает его в список и также выбирает его. Вот почему я не знаю, изменился ли "quot;" должно сработать. Если бы я использовал удаленный JSON в качестве источника, я думаю, что мог бы добавить обратный вызов, но здесь это не так. В этом случае источник отображается как встроенный в страницу.
 13 июн. 2012 г., 18:07
О, я вижу. Я думаю, что смогу принять это. Одну секунду...
 13 июн. 2012 г., 17:59
То есть вы хотите добавить элемент в список в ту минуту, когда исходный массив его не включает? Не приведет ли это к тому, что каждый отдельный символ, введенный человеком, будет помещен в исходный массив? Или я недоразумение?
 Kevin Whitaker13 июн. 2012 г., 17:53
Не используетchange событие требует, чтобы поле было размыто? Меня беспокоит то, что если пользователь введет новое значение, результаты поиска не будут возвращены (ведет себя как обычное текстовое поле). Как они узнали бы, чтобы "добавить"? новое значение, если ничего не указывает на то, что оно новое? Есть ли способ подключиться к тому, что возвращается методом поиска?

Чтобы обновить источник автозаполнения, используйте установщик:

$ (& quot; # auto & quot;). autocomplete (& quot; опция & quot ;, & quot; источник & quot ;,       [& Quot; яблоки & Quot;, & Quot; Апельсины & Quot;, & Quot; Бананы & Quot;, & Quot; Слива & Quot;]);

Увидетьhttp://api.jqueryui.com/autocomplete/#option-source

предоставленный Эндрю, заставляет кнопку ADD NEW оставаться, даже если пользователь затем выбирает существующий элемент из массива вместо добавления & quot; new & quot; !!!

Вместо включенного переключателя на «добавить» кнопка, есть встроенная функция .change в автозаполнении, которая может быть использована.

Хотя & quot; Изменить & quot; ожидает, пока текстовое поле не потеряет фокус, это может быть лучшим интерфейсом, чтобы затем показывать КНОПКУ ДОБАВЛЕНИЯ, если нет совпадения с массивом. (или может создать «подтверждение» добавления).

Посмотрите альтернативный код, который на самом деле скрывает & quot; кнопку добавления & quot; еще раз, если пользователь выбирает из массива. То, что решение Эндрю Уитакера не делает:

$(function () {

  var source = ["Apples", "Oranges", "Bananas"];

  $("#auto").autocomplete({
    source: function (request, response) {
        var result = $.ui.autocomplete.filter(source, request.term);


        response(result);
    },
    change: function( event, ui ) {
      var $label = $(this);
      // figure out the id of hidden input box from label id
      var $id = $('#'+this.id.replace('label_','id_'));
      if ( ui.item === null && $label.val() != '' ){
        $("#add").show();            
      }
        if( ui.item != null && $label.val() != '' ){
        $("#add").hide();            
      }
    }
  });

  $("#add").on("click", function () {
    source.push($("#auto").val());
    $(this).hide();
  });

});

Смотрите мой пересмотренный Fiddle в действии -http://jsfiddle.net/VLLuJ/25/

Ваш ответ на вопрос