【问题标题】:autocomplete (external xml data) split attributes into separate fields自动完成(外部 xml 数据)将属性拆分为单独的字段
【发布时间】:2016-08-24 13:25:06
【问题描述】:

我正在处理自动完成 XML 数据解析问题。

当用户使用“标签”作为搜索查询进行搜索时,我正在尝试拆分每个 <states> 元素的属性。

例如: 搜索“杜布罗夫尼克”,并选择一个选项。 一旦被选中,他们所做的选择中的属性就会被拆分,然后用于填写表格。

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/

【问题讨论】:

    标签: javascript jquery xml autocomplete jquery-ui-autocomplete


    【解决方案1】:

    因为:

        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 被填充并自动完成过滤掉它的结果。

    【讨论】:

    • 嗨@v.coder,感谢您的快速回复。我已将此代码放入进行测试,但它似乎没有通过任何结果。我是否在自动完成中遗漏了代码中的某些内容?再次感谢。
    • 我不确定为什么它在 JSFiddle 中不起作用,可能与 ajax 调用有关。这是粘贴箱中的整个代码:pastebin.com/PxQjMBnR
    • 请注意我使用过:
    • 非常感谢您的帮助。我已经粘贴了您通过 pastebin 发送的代码,但由于某种原因,例如,当您输入 Cyprus 时,自动完成功能没有选项。要查看我正在处理的测试站点,link 并选择新模板,然后单击“搜索假期”按钮以查看我正在处理的表单。真奇怪!
    • 我可以看到,在控制台中,它正在通过 XML 提要提取所有数组数据。它只是没有相应地填充搜索字段。
    猜你喜欢
    • 2018-03-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多