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/

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

首先，您会收到我认为的“地理名称”节点列表，而不仅仅是一个：

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 = [];

然后您遍历 '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]);   
                 }

如果是，则推入“源”数组。

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

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

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

干杯，黑人