從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）; '返回'實際列表。

注意，每次發生新的自動完成搜索時，都會調用自動完成對象的源代碼函數，因此您每次都返回正確的項目集合。

當然，如果符合您的要求，您可以製作更復雜和最優化的解決方案。

歡呼聲，荊