オートコンプリートを使用して検索入力を追加し、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/
私の英語でごめんなさい、私はフランス人です。