JQuery从XML自动完成
我正在玩jquery ui autocomplete。 并且有一个关于如何查询XML数据的问题。 我有一个包含位置列表的XML文件，类似于：
The Tower of London Example text 51.5082349601834 -0.0763034820556641 6286786 GB United Kingdom S CSTL http://www.exmaple.com 我的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结果返回。 提前致谢。
首先，我将发布代码：
HTML
XML
The Tower of London Example text 51.5082349601834 -0.0763034820556641 6286786 GB United Kingdom S CSTL http://www.exmaple.com En name Fr name 51.5082349601834 -0.0763034820556641 6286786 GB2 United Kingdom S CSTL http://www.exmaple.com
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: 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'数组。
和...添加（来源）; '返回'实际列表。
请注意，每次发生新的自动完成搜索时，都会调用自动完成对象的源函数，因此您每次都会返回正确的项集合。
当然，如果这个解决方案符合您的要求，您可以制作更复杂和优化的解决方案。
欢呼，内格拉