Заставить пользователя выбрать из автозаполнения пользовательского интерфейса JQuery и заполнить скрытое поле после выбора

У меня есть большая форма HTML, которая содержит много полей, для которых требуется автозаполнение для учетных записей. Я помещаю эти поля в класс AccountLookup, а jQuery выполняет грязную работу для автозаполнения:

$(".AccountLookup").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "Lookup.asmx/GetAccounts",
            data: "{ 'Search': '" + request.term + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        value: item.Value
                    }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },
    minLength: 3
});

Теперь, когда пользователь выбирает что-то из автозаполнения, мне нужно, чтобы он заполнял скрытое поле только перед помеченным полем ввода; вероятно, используя что-то вроде:

$(this).prev().val(item.Key);

Как включить эту функциональность? Кроме того, как мне заставить пользователя выбирать из автоматического завершения? (Все значения предварительно определены, пользователь не может добавлять новые.)

EDIT: Насколько я понимаю из проверки DOM, опция выбора в настоящее время заполняет скрытое поле формы.

select: function (event, ui) {
    $(this).prev().val(ui.item.key);
}

Ответ 1

$(".AccountLookup").autocomplete({
   /*...*/
}).result(function(event, item) {
   $(this).prev().val(item.Key);
});

Вы также можете использовать jQuery validate, чтобы убедиться, что поле заполнено.

Ответ 2

Я знаю, что это старое сообщение --- но я столкнулся с этим, пытаясь решить подобную проблему (заставляя пользователя выбирать элемент из списка)...

        $("#ac").autocomplete({
            source: function (req, resp) {
                   //add code here...
            },
            select: function (e, ui) {
                $(this).next().val(ui.item.id);
            },
            change: function (ev, ui) {
                if (!ui.item)
                    $(this).val("");
            }
        });

Ответ 3

для выбора силы вы можете использовать "изменить" событие автозаполнения

        var availableTags = [
            "ActionScript",
            "AppleScript"
        ];
        $("#tags").autocomplete({
            source: availableTags,
            change: function (event, ui) {
                if(!ui.item){
                    //http://api.jqueryui.com/autocomplete/#event-change -
                    // The item selected from the menu, if any. Otherwise the property is null
                    //so clear the item for force selection
                    $("#tags").val("");
                }

            }

        });

Ответ 4

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

Для принудительного выбора из автозаполнения вам необходимо использовать опцию mustMatch.

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

Ответ 5

Я столкнулся с этой проблемой уже некоторое время назад, и некоторое сообщение помогло мне вместе с этим. С тех пор я изменил код, поскольку обнаружил, что были случаи, когда я хотел, чтобы из возвращаемой информации было заполнено одно или несколько полей. В опции выбора автозаполнения я добавил функцию.

select: function (e, ui) {ReSetField({'txtID':'id','txtPrice':'price' [,etc...]}, ui)  }

Затем функция " ResetFields" принимает список имен элементов JSON в паре с именами полей и использует имена полей для соответствия элементов в объекте ui. Затем значение можно вытащить из элемента ui и поместить в элемент html.

    function ReSetField(_flds, _vals) {
  //Set up the flds to be reset with values passed in.  
  try {
    if (_flds != undefined) {
      if ($.type(_flds) == 'string') {
        _flds = JSON.parse(_flds);
      };
      var _fld = null;
      var _val = '';
      $.each(_flds, function (index) {
        if (index.length > 0) {
          _fld = '#' + index;   //Set the forms field name to set  
          _val = _flds[index]; //Pick up the field name to set the fields value 
          $fld = $(_fld);
          $fld.val(_vals.item[_val]); //Set the fields value to the returned value             
          }
        }
      })
    };
  }
  catch (e) {
    alert('Cannot set field ' + _fld + '.');
  } 
}

Вставьте " список полей" в элемент HTML как атрибут, например " список полей), и используйте класс " comboBox ". затем может использовать одну функцию для поиска всех элементов ComboBox и настройки автозаполнения в форме, уменьшающей количество кода, необходимого для обработки 2 или более запросов в форме.