自动完成(外部 xml 数据)将属性拆分为单独的字段
autocomplete (external xml data) split attributes into separate fields
我正在处理自动完成 XML 数据解析问题。
我正在尝试在用户使用 "label" 作为搜索查询进行搜索时拆分每个 <states>
元素的属性。
例如:搜索 "Dubrovnik",然后选择一个选项。
一旦被选中,他们所做的选择中的属性将被拆分,然后用于填写表格。
Javascript
注:tjq = jQuery.noConflict();
tjq(function() {
var myArr = [];
tjq.ajax({
type: "GET",
url: "http://www.thetravelosophy.co.uk/images/www.thetravelosophy.co.uk/1/js/Destinations1.xml",
dataType: "xml",
success: parseXml,
complete: setupAC,
failure: function(data) {
alert("XML File could not be found");
}
});
function parseXml(xml)
{
//find every query value
tjq(xml).find("state").each(function()
{
myArr.push(tjq(this).value("label","country","resort","destair"));
});
};
function setupAC()
{tjq( "#country1" ).autocomplete({
source: myArr,
minLength: 3,
select: function( event, ui ) {
event.preventDefault();
tjq('#country1').val(ui.item.label);
this.value = ui.item.label;
tjq('#country').val(ui.item.country);
tjq("#country").change();
tjq('#resort').val(ui.item.resort);
tjq('#destair').val(ui.item.destair);
tjq("#destair").change();
}
});}
XML数据如下:
<states>
<state label="Dubrovnik Region, Croatia" country="Croatia" resort="" destair="DBV"/>
<state label="Dubrovnik Region, Croatia" country="Croatia" resort="" destair="DBV"/>
<state label="Split Region, Croatia" country="Croatia" resort="" destair="SPU"/>
<state label="Split, Croatia" country="Croatia" resort="1723" destair="SPU"/>
</states>
JSfiddle:https://jsfiddle.net/ftro7bqd/
是因为:
myArr.push(tjq(this).value("label","country","resort","destair"));
无法从 xml 数据中读取值。而 myArr 是空的。
这可能会代替它:
label = $(this).find("label").attr('value');
country = $(this).find("country").attr('value');
resort = $(this).find("resort").attr('value');
destair = $(this).find("destair").attr('value');
myArr.push({'label':label,'country':country,'resort':resort,'destair':destair});
现在 myArr 得到填充,自动完成从中过滤掉结果。
我正在处理自动完成 XML 数据解析问题。
我正在尝试在用户使用 "label" 作为搜索查询进行搜索时拆分每个 <states>
元素的属性。
例如:搜索 "Dubrovnik",然后选择一个选项。 一旦被选中,他们所做的选择中的属性将被拆分,然后用于填写表格。
Javascript 注:tjq = jQuery.noConflict();
tjq(function() {
var myArr = [];
tjq.ajax({
type: "GET",
url: "http://www.thetravelosophy.co.uk/images/www.thetravelosophy.co.uk/1/js/Destinations1.xml",
dataType: "xml",
success: parseXml,
complete: setupAC,
failure: function(data) {
alert("XML File could not be found");
}
});
function parseXml(xml)
{
//find every query value
tjq(xml).find("state").each(function()
{
myArr.push(tjq(this).value("label","country","resort","destair"));
});
};
function setupAC()
{tjq( "#country1" ).autocomplete({
source: myArr,
minLength: 3,
select: function( event, ui ) {
event.preventDefault();
tjq('#country1').val(ui.item.label);
this.value = ui.item.label;
tjq('#country').val(ui.item.country);
tjq("#country").change();
tjq('#resort').val(ui.item.resort);
tjq('#destair').val(ui.item.destair);
tjq("#destair").change();
}
});}
XML数据如下:
<states>
<state label="Dubrovnik Region, Croatia" country="Croatia" resort="" destair="DBV"/>
<state label="Dubrovnik Region, Croatia" country="Croatia" resort="" destair="DBV"/>
<state label="Split Region, Croatia" country="Croatia" resort="" destair="SPU"/>
<state label="Split, Croatia" country="Croatia" resort="1723" destair="SPU"/>
</states>
JSfiddle:https://jsfiddle.net/ftro7bqd/
是因为:
myArr.push(tjq(this).value("label","country","resort","destair"));
无法从 xml 数据中读取值。而 myArr 是空的。
这可能会代替它:
label = $(this).find("label").attr('value');
country = $(this).find("country").attr('value');
resort = $(this).find("resort").attr('value');
destair = $(this).find("destair").attr('value');
myArr.push({'label':label,'country':country,'resort':resort,'destair':destair});
现在 myArr 得到填充,自动完成从中过滤掉结果。