JQuery UI Autocomplete с гибридным текстом/идентификатором

Ответ 1

Как я делаю autocomplete, нужно создать контейнер div, содержащий вход. Когда я выбираю элемент, я добавляю ссылку, содержащую span в контейнер, и я скрываю поле ввода.

Ссылка и диапазон стилизованы так, что она выглядит как кнопка с X и имеет обработчик события щелчка, чтобы удалить запись из DOM, очистить скрытое поле и повторно показать окно ввода при нажатии. Поэтому, когда выбран элемент:

  <div class="container">
    <a href="#"><span>Selected Item</span></a>
    <input id="myautocomplete" type="text" />
    <input type="hidden" name="myvalue" value="1" />
  </div>

И когда элемент не выбран:

 <div class="container">
    <input id="myautocomplete" name="myautocomplete" type="text" />
    <input id="myvalue" name="myvalue" type="hidden" value="" />
  </div>

Таким образом, вы либо вынуждены выбирать элемент, либо вводить текст свободной формы. На бэкэнд, если параметр запроса с ключом "myvalue" пуст, вы скорее посмотрите на параметр запроса с ключом "myautocomplete".

Ответ 2

Когда я предполагаю, что у вас установлены следующие поля:

<div>
    <input type="text" name="visible" class="autocomplete-reference" />
    <input type="hidden" name="hidden" />
</div>

Вам нужно выполнить init после js (он работает с jQuery 1.5.2):

$(document).ready(function() {
    $('.autocomplete-reference').each(function () {
        $(this).keydown(function(e){
            /*
            * this will reset hidden id reference on each visible field manual change
            * we have to bind it on keydown because we want to recognize event of submiting form by enter after autocomplete set
            */
            if (e.keyCode != 13) {
                $(this).siblings('input[type=hidden]').each(function () {
                    $(this).val('');
                });
            }
        });
        $(this).autocomplete({
            minLength: 1,
            /* you can set appending of autocomplete menu into some container to set css contextually
            appendTo: '#someElem',*/
            source: sourceFunction,
            search:function (event, ui) {
                //TODO ...spinner init...
            },
            open:function (event, ui) {
                /* you can grab autocomplete menu widget by this to manipulate some recognizing id, etc..
                 * $(this).autocomplete('widget')
                */
                //TODO ..stop spinner ...
                $(this).keydown(function(e){
                    /* this is important for live reference updates while arrow keys changes  */
                    if (e.keyCode == 37 || e.keyCode == 39) {
                       $($(this).data('autocomplete').menu.active).find('a').trigger('click');
                    }
                });
            },
            focus: function(event, ui) {
                /* here we'll map our data object onto both fields */
                $(this).val(ui.item.label);
                $(this).siblings('input[type=hidden]').each(function () {
                    $(this).val(ui.item.key);
                });
            },
            select: function(event, ui) {
                /* here we'll map our data object onto both fields */
                $(this).val(ui.item.label);
                $(this).siblings('input[type=hidden]').each(function () {
                    $(this).val(ui.item.key);
                });
            },
            close: function(event, ui) {
                //TODO ..stop spinner ...
            }
        });
    });
});

Очень приятно иметь некоторую проверку на стороне сервера, которая может конвертировать точные: видимые значения полей в ссылки для быстрого набора людей, конечно.

Ответ 3

Хотя это старый вопрос, мой метод может помочь.

В событии .change вы можете искать значение текстового поля со значением из вашего списка источников, используя цикл.

Goto для более подробной информации: здесь он находится в исходном списке Ajax, но тренировка аналогична. Поиск текста в JQuery AutoComplete Ui

Эта вещь беспокоила меня много раз, и в конце концов я понял это:)

Ответ 4

Вы можете использовать event.preventDefault

Соберите выбранные значения через ui.item.label или ui.item.value и получите необходимое значение и установите его в одно и то же текстовое поле.

var idNameCombo = ui.item.label;
            event.preventDefault();
            $("#mID").val(idNameCombo.split(",")[0].trim());