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 に答える