JQuery 从 XML 自动完成

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 值，并将“value”设置为空字符串（“value”将是 jQuery 自动完成文本）。

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

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

因此，您初始化一个“source”数组：

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

然后迭代“data”数组，并根据当前的“lang”，使用实际的“name_en”或“name_fr”设置“value”属性。

之后，您可以测试“object.value”是否符合要求：

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

如果符合，则推入“source”数组。

和...
添加（来源）；
“返回”实际列表。

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

当然，如果这个解决方案满足您的要求，您可以制定更复杂和优化的解决方案。

干杯，内格拉