在xml文件中的jquery ui自動完成搜索

Question

我添加了一個自動完成的搜索輸入來分析一個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，標題和類別。

目前，我的腳本搜索xml文件的每個字段，但顯示正確的結果... 我怎樣才能在一些xml字段中搜索？

我儘量讓小提琴，但它不工作：http://jsfiddle.net/UaEsp/2/

對不起，我的英語，我是法國人。

Answer 1

那麼我遇到了訪問XML文件的問題。希望你在同一臺服務器上工作（http://freakyshape.com/）。我從你的小提琴here創建了一個新表格。

我已經提取了一個方法來從xml節點創建具有所需屬性的對象。這些項目被推送到數組中，該數組被進一步分配爲自動完成的源。在搜索條目value財產

autocomplete搜索，所以我已經把下面的行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屬性挑的價值。