使用jQuery-UI自動完成選擇選項時設置多個輸入值

Question

大家好，我是java-script中的新手。所以我希望你能幫助我。當用戶將數據設置爲城市字段時，我想自動在國家字段中設置數據。 我有一個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輸入中。

這意味着您可以在自動填充的select屬性中使用ui.item.city和ui.item.country。

因爲現在有三個屬性，您需要自定義自動填充並告訴它使用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特性自動完成的Ajax請求總會從jsfiddle.net失敗）。