从XML完成JQuery自动完成

Question

我正在玩jQuery UI自动完成。并有一个关于如何查询XML数据的问题。我有一个XML文件的位置的列表，类似于：

<geoname> 
    <name_en>The Tower of London</name_en> 
    <name_fr>Example text</name_fr> 
    <lat>51.5082349601834</lat> 
    <lng>-0.0763034820556641</lng> 
    <geonameId>6286786</geonameId> 
    <countryCode>GB</countryCode> 
    <countryName>United Kingdom</countryName> 
    <fcl>S</fcl> 
    <fcode>CSTL</fcode> 
    <web>http://www.exmaple.com</web> 
</geoname> 

我的jQuery是：

jQuery(document).ready(function() { 
    lang = 'en';   
    $.ajax({ 
     url: "places.xml", 
     dataType: "xml", 
     success: function(xmlResponse) { 
      var data = $("countryCode", xmlResponse).map(function() { 
       return { 
        value: $("name", this).text(), 
        id: $("geonameId", this).text(), 
        countryName: $("countryName", this).text(), 
        link: $("web", this).text(), 
        code: $("countryCode", this).text() 
       }; 
      }).get(); 

      $("#results").autocomplete({ 
       source: data, 
       minLength: 0, 
       select: function(event, ui) { 
         $('#foo').html(''); 
         $('#foo').html(ui.item.code).slideDown(); 

       } 
      }); 
     } 
    }); 
}); 

什么我遇到的麻烦是，我要指定一个变量，说只有在将其设置为EN时才搜索name_en，而在其他情况下，只有在设置为FR时才搜索name_fr。当我将语言设置为EN时，我不希望name_fr结果回来。提前致谢。

Answer 1

首先，我会后的代码：

HTML

<select id="lang"> 
    <option value="en">EN</option> 
    <option value="fr">FR</option> 
</select> 
<input type="text" id="results" /> 
<span id="foo" /> 

XML

<list> 
<geoname> 
    <name_en>The Tower of London</name_en> 
    <name_fr>Example text</name_fr> 
    <lat>51.5082349601834</lat> 
    <lng>-0.0763034820556641</lng> 
    <geonameId>6286786</geonameId> 
    <countryCode>GB</countryCode> 
    <countryName>United Kingdom</countryName> 
    <fcl>S</fcl> 
    <fcode>CSTL</fcode> 
    <web>http://www.exmaple.com</web> 
</geoname> 
<geoname> 
    <name_en>En name</name_en> 
    <name_fr>Fr name</name_fr> 
    <lat>51.5082349601834</lat> 
    <lng>-0.0763034820556641</lng> 
    <geonameId>6286786</geonameId> 
    <countryCode>GB2</countryCode> 
    <countryName>United Kingdom</countryName> 
    <fcl>S</fcl> 
    <fcode>CSTL</fcode> 
    <web>http://www.exmaple.com</web> 
</geoname> 
</list> 

JS

jQuery(document).ready(function() {  
    var lang = "en"; 
    $("#lang").bind("change", function() { 
     lang = this.value; 
    }); 
    $.ajax({ 
     url: "/echo/xml/", 
     dataType: "xml", 
     success: function(xmlResponse) { 
      var data = $("geoname", xmlResponse).map(function() { 
       return { 
        value: "", 
        name_en: $("name_en", this).text(), 
        name_fr: $("name_fr", this).text(), 
        id: $("geonameId", this).text(), 
        countryName: $("countryName", this).text(), 
        link: $("web", this).text(), 
        code: $("countryCode", this).text() 
       }; 
      }).get(); 
      $("#results").autocomplete({ 
       source: function(req, add) { 
       var source = []; 
       for (var i = 0; i < data.length; i++) 
       {    
        if (lang == "en") 
        { 
        data[i].value = data[i].name_en; 
        } 
        else if (lang == "fr") 
        { 
         data[i].value = data[i].name_fr; 
        } 
       if (data[i].value.substr(0, req.term.length).toLowerCase() == req.term.toLowerCase()) 
       { 
        source.push(data[i]); 
       } 
       } 
       add(source); 
       }, 
       minLength: 0, 
       select: function(event, ui) { 
         $('#foo').html(''); 
         $('#foo').html(ui.item.code).slideDown(); 

       } 
      }); 
     } 
    }); 
}); 

这里是一个的jsfiddle解决方案，我测试

http://jsfiddle.net/pinusnegra/KFHnd/

这是一个有点乱，但你可以做，如果你想变得更好。我告诉你它是如何工作的：

首先，您会收到“geoname”节点，我认为，名单不只有一个：

var data = $("geoname", xmlResponse).map(function() { 
       return { 
        value: "", 
        name_en: $("name_en", this).text(), 
        name_fr: $("name_fr", this).text(), 
        id: $("geonameId", this).text(), 
        countryName: $("countryName", this).text(), 
        link: $("web", this).text(), 
        code: $("countryCode", this).text() 
       }; 
      }).get(); 

你得到name_en和name_fr值，并设置了“值'为空字符串（“值”将是jQuery自动完成文本）。

在jQuery自动完成中，您可以为源设置一个函数，该函数具有'req'对象和'add'回调。

'req'对象包含'term'属性，它是实际的文本框输入。 'add'回调添加匹配项目的列表（数组）。

所以你初始化一个“源”数组：

source: function(req, add) { 
       var source = []; 

那么你遍历“数据”阵列上，并根据当前的“郎”，建立了“价值”属性与实际“name_en '或'name_fr'。

在此之后，您可以测试在“object.value”，如果它是符合要求：

if (data[i].value.substr(0, req.term.length).toLowerCase() == req.term.toLowerCase()) 
       { 
        source.push(data[i]); 
       } 

如果是这样，那么推入“源”阵列。

and ... add（source）; '返回'实际列表。

注意，每次发生新的自动完成搜索时，都会调用自动完成对象的源代码函数，因此您每次都返回正确的项目集合。

当然，如果符合您的要求，您可以制作更复杂和最优化的解决方案。

欢呼声，荆