1

我添加了一个带有自动完成功能的搜索输入来解析一个 xml 文件。

我很难理解它是如何工作的。

我的代码：

var myArr = [];

$.ajax({
    type: "GET",
    url: "data.xml", 
    dataType: "xml",
    success: parseXml,
    complete: setupAC,
    failure: function(data) {
    alert("XML File could not be found");
    }
});

function parseXml(xml) {

    $(xml).find("element").each(function() {    

        title = $(this).text();
        id = $(this).attr("id");
        category = $(this).attr("category");
        urlimage = $(this).find('urlimage').attr("src");
        urlpageautocomplete = $(this).find('urlpage').attr("url");
        imageautocomplete = "image-autocomplete";
        titleautocomplete = "title-autocomplete";
        categoryautocomplete = "category-autocomplete";
        linkurl = "link-auto";
        var quotes = "'";

        value = "<a class="+linkurl+" href="+ urlpageautocomplete +" onclick=gestionClic(compteur"+id+");><div class=" + imageautocomplete + "><img src='" + urlimage + "'/ ></div>" + "<div class=" + titleautocomplete + ">"+title +"</div><div class=" + categoryautocomplete + ">"+ category+"</div></a>";  
    myArr.push(value);      
    })

}


function setupAC() {
$( "input#search" ).autocomplete({
      minLength: 3,
      source: myArr,
      focus: function( event, ui ) {
         $('input#search').focus();
        return false;
      },
      select: function( event, ui ) {
        $( "input#search" ).val( ui.item.value );
        return false;
      }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append(item.value)
        .appendTo( ul );
    };
}

这是一个xml示例

<element id="13" size="normal" category="blog">
        <tag>iphone dock apple printing 3d</icon>
        <icon class="icon-pencil"></icon>
        <urlpage url="/portfolio/dock.html"></urlpage>
        <urlimage src='./Post thumbnail images/formlabs.jpg'></urlimage>
        <date date="12 Apr"></date>
        <title>Formlabs 3D printer</title>
</element>

在我的示例中，我只想在 xml 中搜索：标签、标题和类别。

我想在结果中显示：urlimage、title 和 category。

目前，我的脚本在 xml 文件的每个字段中搜索，但显示正确的结果...如何仅在某些 xml 字段中搜索？

我试着做一个小提琴，但它不起作用：http: //jsfiddle.net/UaEsp/2/

对不起我的英语，我是法国人。

4

1 回答 1

1

好吧，我在访问 xml 文件时遇到了问题。希望您在同一台服务器上工作（http://freakyshape.com/）。我在这里用你的小提琴创建了一个新表格。

我已经提取了一种方法来从 xml 节点创建具有所需属性的对象。这些项目被推入数组中，该数组被进一步分配为自动完成的源。

autocomplete在value搜索项的属性中搜索，所以我放了以下行ret.value=title + " " + category;，它可以将搜索限制在 xml 中的特定字段。

var SearchItem = function (title, id, category, urlimage, urlpageautocomplete) {
        var ret = new Object();
        ret.value=title + " " + category;/*NEED THIS TO SEARCH*/
        ret.lable=title;/*NEED THIS TO DISPLAY IN SEARCH BOX*/
        ret.title = title;
        ret.id = id;
        ret.category = category;
        ret.urlimage = urlimage;
        ret.urlpageautocomplete = urlpageautocomplete;
        ret.imageautocomplete = "image-autocomplete";
        ret.titleautocomplete = "title-autocomplete";
        ret.categoryautocomplete = "category-autocomplete";
        ret.linkurl = "link-auto";
            ret.renderHtml= "<a class=" + ret.linkurl + " href=" 
                + ret.urlpageautocomplete 
                + " onclick=gestionClic(compteur" + ret.id + ");><div class=" 
                + ret.imageautocomplete + "><img src='" + ret.urlimage 
                + "'/ ></div>" + "<div class=" + ret.titleautocomplete + ">" 
                + ret.title + "</div><div class=" + ret.categoryautocomplete 
                + ">" + ret.category + "</div></a>";
        return ret;
    }

所以你的parseXml功能现在是这样的：

function parseXml(xml) {
    $(xml).find("element").each(function () {
        title = $(this).text();
        id = $(this).attr("id");
        category = $(this).attr("category");
        urlimage = $(this).find('urlimage').attr("src");
        urlpageautocomplete = $(this).find('urlpage').attr("url");

        $("#debug").append($("<div/>").text(title));
        myArr.push(new SearchItem(title, id, category, 
                              urlimage, urlpageautocomplete));
    });
}

_renderItem更改为从renderHtml搜索项的属性中选择值。

于 2013-04-26T00:24:49.693 回答