jQuery通过XML自动完成 [英] JQuery auto complete from XML
问题描述
我正在玩jQuery ui autocomplete.还有关于如何查询XML数据的问题.我有一个带有位置列表的XML文件，类似于:
I'm playing around with jquery ui autocomplete. And have a question about how to query the XML data. I have an XML file with a list of locations, similar to:
<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结果返回.预先感谢.
What I'm having trouble with is that I want to specify a variable that says only search name_en when I've set it to EN, and in other cases only search for name_fr when set to FR. I don't want name_fr results to come back when I've set the language to EN. Thanks in advance.
推荐答案
首先，我将发布代码:
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 解决方案
And here is a JSFiddle solution I tested
http://jsfiddle.net/pinusnegra/KFHnd/
这有点混乱，但是如果您愿意，可以使其更好.我告诉你它是如何工作的:
It's a little messy, but you can make it better if you want. I tell you how it works:
首先，您会收到一个我认为不是唯一的"geoname"节点列表:
First, you receive a list of 'geoname' nodes I think, not only one:
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自动完成文本).
You get the name_en and name_fr value, and you set the 'value' to an empty string (the 'value' will be the jQuery autocomplete text).
在jQuery自动完成功能中，您可以为源设置一个函数，该函数具有一个"req"对象和一个"add"回调.
In jQuery autocomplete, you can set a function to the source, which has a 'req' object, and an 'add' callback.
"req"对象包含一个"term"属性，它是实际的文本框输入. 'add'回调会添加匹配项的列表(数组).
The 'req' object contains a 'term' property, which is the actual textbox input. The 'add' callback adds a list (an array) of the matched items.
因此，您初始化了一个源"数组:
So you initialize a 'source' array:
source: function(req, add) {
var source = [];
然后遍历数据"数组，并基于当前的"lang"，使用实际的"name_en"或"name_fr"设置"value"属性.
then you iterate over the 'data' array, and based on the current 'lang', setup the 'value' property with the actual 'name_en' or 'name_fr'.
在此之后，您可以测试'object.value'是否符合要求:
After this, you can test on the 'object.value', if it's match the requirements:
if (data[i].value.substr(0, req.term.length).toLowerCase() == req.term.toLowerCase())
{
source.push(data[i]);
}
如果是这样，则推入源"数组.
if so, then push into the 'source' array.
然后... 添加(源); 返回"实际列表.
and... add(source); 'returns' the actual list.
请注意，每次进行新的自动完成搜索时，都会自动调用自动完成对象的源函数，因此您每次都会返回正确的项目集合.
Notice that the source function of the autocomplete object will be called everytime when a new autocomplete search occurs, so you return the right collection of items everytime.
当然，如果此解决方案满足您的要求，您可以提供一个更复杂和优化的解决方案.
Of course, you can make a more sophisticated and optimized solution if this one meets your requirements.
欢呼，内格拉
这篇关于jQuery通过XML自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
