Установить значения нескольких входов при выборе опции с использованием автозаполнения jQuery-UI

Question

Привет всем Я новичок в java-скрипте. Поэтому я надеюсь, что вы можете мне помочь. Когда пользователь устанавливает данные в поле города, я хочу автоматически установить данные в поле страны. У меня есть файл XML:

<ROWSET> 
<ROW> 
<city></city> 
<country></country> 
</ROW> 
</ROWSET> 

В HTML документа У меня есть два поля ввода

<input id="id_city"> 
<input id="country"> 

Вот мой JS код:

$.ajax({ 
    url: "/media/xml/country.xml", //your url 
    type: "GET", //may not need this-fiddle did-default is GET 
    dataType: "xml", 
    success: function(xmlResponse) { 
     var data = $("ROW", xmlResponse).map(function() { 
      return { 
       value: $("city", this).text() + ", " + ($.trim($("country", this).text()) || "(unknown country)") 
      }; 
     }).get(); 
     $("#id_city").autocomplete({ 
      source: function(req, response) { 
       var re = $.ui.autocomplete.escapeRegex(req.term); 
       var matcher = new RegExp("^" + re, "i"); 
       response($.grep(data, function(item) { 
        return matcher.test(item.value); 
       })); 
      }, 
      minLength: 2, 
      select: function(event, ui) { 
       $("p#result").html(ui.item ? "Selected: " + ui.item.value + ", cityId: " + ui.item.id : "Nothing selected, input was " + this.value); 
      } 
     }); 
    } 
}); 

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

Answer 1

Хорошо, это должно сделать это за вас. Я изменить определение data так что теперь имеет три свойства:

• label который является таким же, как ваш оригинальный value.
• city, поэтому вы можете поместить его в свой вход #city.
• country, поэтому вы можете поместить его в свой вход #country.

Это означает, что вы можете использовать ui.item.city и ui.item.country в свойстве select автозаполнения.

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

$.ajax({ 
    url: "/media/xml/country.xml", 
    type: "GET", 
    dataType: "xml", 
    success: function (xmlResponse) { 
     var data = $("ROW", xmlResponse).map(function() { 
      return { 
       label: $("city", this).text() + ", " + ($.trim($("country", this).text()) || "(unknown country)"), 
       city: $.trim($("city", this).text()), 
       country: $.trim($("country", this).text()) 
      }; 
     }).get(); 
     $("#id_city").autocomplete({ 
      source: function (req, response) { 
       var re = $.ui.autocomplete.escapeRegex(req.term); 
       var matcher = new RegExp("^" + re, "i"); 
       response($.grep(data, function (item) { 
        return matcher.test(item.city); 
       })); 
      }, 
      minLength: 2, 
      select: function (event, ui) { 
       $("p#result").html(ui.item ? "Selected: " + ui.item.label + ", cityId: " + ui.item.city : "Nothing selected, input was " + this.value); 
       $("#id_city").val(ui.item.city); 
       $("#country").val(ui.item.country); 
       return false; 
      }, 
      _renderItem: function (ul, item) { 
       return $("<li></li>") 
        .data("value", item) 
        .append("<a>" + item.label + "</a>") 
        .appendTo(ul); 
      } 
     }); 
    } 
}); 

Также я создал «работает» Fiddle (потому что ваш код использует источник Ajax XML Я жёстко ответа в переменном и сгенерировал автозаполнение в error собственности как запрос Аякса будет всегда сбой от jsfiddle.net).