title: jquery ui autocomplete search in xml file
body: <p>I add a search input with autocomplete to parse an xml file.</p>
  
  <p>I have some difficulties to understand how it works exactly.</p>
  
  <p>my code: </p>
  
  <pre><code>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 = "&lt;a class="+linkurl+" href="+ urlpageautocomplete +" onclick=gestionClic(compteur"+id+");&gt;&lt;div class=" + imageautocomplete + "&gt;&lt;img src='" + urlimage + "'/ &gt;&lt;/div&gt;" + "&lt;div class=" + titleautocomplete + "&gt;"+title +"&lt;/div&gt;&lt;div class=" + categoryautocomplete + "&gt;"+ category+"&lt;/div&gt;&lt;/a&gt;";  
      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 $( "&lt;li&gt;" )
          .append(item.value)
          .appendTo( ul );
      };
  }
  </code></pre>
  
  <p>Here an xml example</p>
  
  <pre><code>&lt;element id="13" size="normal" category="blog"&gt;
          &lt;tag&gt;iphone dock apple printing 3d&lt;/icon&gt;
          &lt;icon class="icon-pencil"&gt;&lt;/icon&gt;
          &lt;urlpage url="/portfolio/dock.html"&gt;&lt;/urlpage&gt;
          &lt;urlimage src='./Post thumbnail images/formlabs.jpg'&gt;&lt;/urlimage&gt;
          &lt;date date="12 Apr"&gt;&lt;/date&gt;
          &lt;title&gt;Formlabs 3D printer&lt;/title&gt;
  &lt;/element&gt;
  </code></pre>
  
  <p>In my example, I just want to search in xml : tag, title and category.</p>
  
  <p>And I want to display in result: urlimage, title and category.</p>
  
  <p>Currently, my script search in every field of the xml file but display the correct results...
  How can I search just in some xml field?</p>
  
  <p>I try to make a fiddle but it don't works on it: <a href="http://jsfiddle.net/UaEsp/2/" rel="nofollow">http://jsfiddle.net/UaEsp/2/</a></p>
  
  <p>Sorry for my English, I'm french.</p>