Заставьте пользователя выбирать из автозаполнения JQuery UI и заполнить скрытое поле после выбора - PullRequest
Новая
       6

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

13 голосов
/ 21 декабря 2010

У меня есть большая 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);
}

Ответы [ 5 ]

17 голосов
/ 27 сентября 2012

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

        $("#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 голосов
/ 21 декабря 2010 
$(".AccountLookup").autocomplete({
   /*...*/
}).result(function(event, item) {
   $(this).prev().val(item.Key);
});

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

1 голос
/ 17 декабря 2012

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

        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("");
                }

            }

        });
0 голосов
/ 28 января 2015

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

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

Функция " ResetFields " затем получает JSON-список имен элементов в паре с fieldnames и использует имена полей для сопоставления элементов в объекте пользовательского интерфейса.Затем значение можно извлечь из элемента пользовательского интерфейса и вставить в элемент 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 + '.');
  } 
}

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

0 голосов
/ 21 декабря 2010

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

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

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

...