title: jqueryUi autocomplete - custom data and display
body: <p>My full code is here: <a href="http://jsfiddle.net/HfNk9/13/">http://jsfiddle.net/HfNk9/13/</a></p>
  
  <p>I am looking to this example <a href="http://jqueryui.com/demos/autocomplete/custom-data.html">jqueryUi autocomplete - custom data and display</a>.</p>
  
  <p>Let's suppose the object projects is different and it looks like this:</p>
  
  <pre><code>project = [
      {
          name: 'bar',
          value: 'foo',
          imgage: 'img.png'
      }
  ]
  </code></pre>
  
  <p>If I set <code>source = project</code> the autocomplete refers to <code>project.value</code> and not <code>project.name</code>.<br>
  How should I change this behaviour?</p>
  
  <hr>
  
  <pre><code>var autocomplete = function(element, data) {
      var fixtures = [
          {
          avatar: "http://www.placekitten.com/20/20",
          name: 'aaaaaaaaa',
          value: 'bbbbbbbbb'}
      ];
  
      element.autocomplete({
          minLength: 3,
          source: function(request, response) {
              var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
              response($.grep(fixtures, function(value) {
                  return matcher.test(value.name);
              }));
          },
          create: function() {
              console.log(fixtures)
              element.val(fixtures.name);
          },
          focus: function(event, ui) {
              element.val(ui.item.name);
              return false;
          },
          select: function(event, ui) {
              element.val(ui.item.name);
              return false;
          }
      }).data('autocomplete')._renderItem = function(ul, item) {
          return $('&lt;li&gt;&lt;/li&gt;')
              .data('item.autocomplete', item)
              .append('&lt;a&gt;&lt;img src="' + item.avatar + '" /&gt;' + item.name + '&lt;br&gt;&lt;/a&gt;')
              .appendTo(ul);
      };
  };
  
  autocomplete($('#auto'));
  </code></pre>
  
  <p>My full code: <a href="http://jsfiddle.net/HfNk9/13/">http://jsfiddle.net/HfNk9/13/</a></p>