使用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失败）。