Изменение события автозаполнения JQery UI

Question

Привет, у меня проблема с событием изменения. По документации должен быть объект ui.item

После того, как предмет был выбран; ui.item относится к выбранному элементу. Всегда срабатывает после события закрытия.

Но когда я пытаюсь это сделать, ui.item не определен :( Я хочу сбросить s_town_id, когда ввод в автозаполнении не совпадает с данными из скрипта.

<input id="s_town" type="text" name="s_town" />
<input type="text" id="s_town_id" name="s_town_id"  />

    
 $(function() {
  $("#s_town").autocomplete({
   source: function(request, response) {
    $.ajax({
     url: "/_system/_ajax/uiautocomplete.php",
     dataType: "json",
     data: {
      name: "s_town",
      term: request.term
     },
     success: function(data) {
      response($.map(data, function(item) {
       return {
        label: item.whisper_name+ " [" + item.zip_code + " / " + item.lup_state + "]",
        value: item.whisper_name,
        id: item.whisper_id, 
        zip_code: item.zip_code, 
        lup_state: item.lup_state, 
        stateid: item.stateid
       }
      }))
     }
    })
   },
   minLength: 2,
   select: function(event, ui) {
    $("#s_town_id").val(ui.item.id);
   },
   change: function(event, ui)
   {
    // ui.item is undefined :( where is the problem?
    $("#s_town_id").val(ui.item.id);
   }

  });


 });
    

Answer 1

Я нахожу решение, где я тестирую event.originalEvent.type, если он выбран или нет, и после сбоя я сбрасываю s_town_id. Но любое лучшее решение все еще хорошо.

<input id="s_town" type="text" name="s_town" />
<input type="text" id="s_town_id" name="s_town_id"  />

    
 $(function() {
  $("#s_town").autocomplete({
   source: function(request, response) {
    $.ajax({
     url: "/_system/_ajax/uiautocomplete.php",
     dataType: "json",
     data: {
      name: "s_town",
      term: request.term
     },
     success: function(data) {
      response($.map(data, function(item) {
       return {
        label: item.whisper_name+ " [" + item.zip_code + " / " + item.lup_state + "]",
        value: item.whisper_name,
        id: item.whisper_id, 
        zip_code: item.zip_code, 
        lup_state: item.lup_state, 
        stateid: item.stateid
       }
      }))
     }
    })
   },
   minLength: 2,
   select: function(event, ui) {
    $("#s_town_id").val(ui.item.id);
   },
   change: function(event, ui)
   {
    try
    {
        if(event.originalEvent.type != "menuselected")
        {
             // Unset ID
             $("#s_town_id").val("");
        }
    }
    catch(err){ 
        // unset ID 
        $("#s_town_id").val("");
    }
   }

  });


 });
    

Answer 2

, если ui.item не определен, это означает, что ваш источник json сформирован неправильно. Вы должны отправить JSON-источник, как это:

[{"label":"Jean","value":1},{"label":"carl","value":2}]

Вы можете добавить больше ключей к массиву, но по крайней мере вы должны установить «метку» и «значение». Проверьте строку JSON. Также я рекомендую вам использовать последнюю версию автозаполнения 1.8.1 на данный момент