title: Understanding and implementing jQuery autocomplete with AJAX source and appendTo
body: <p>Below is my attempt at getting <code>appendTo</code> to work with jQuery autocomplete with AJAX source.</p>
  
  <p>I have multiple questions, which will hopefully help many others who are struggling with understanding the correct way to implement autocomplete with and AJAX source.</p>
  
  <p>1) <code>source: function(request, response) {...}</code>
  What does this do? Why is it needed.</p>
  
  <p>2) What format does <code>function(data){ response($.map (data, function(obj) {</code> return the data in?  I realize the data is in JSON format, but what is the point of <code>.map</code>? Is it necessary to do this? Are there benefits?</p>
  
  <p>3a) When using <code>appendTo</code> and <code>renderItem</code>, is it necessary to have the above mentioned <code>success</code> data returned?</p>
  
  <p>3b) Either or, depending on the above data, how do you correctly use appendTo and renderItem to change the formatting and display of your retrieved values?</p>
  
  <pre><code>$(function() {
  $( ".find_group_ac" ).autocomplete({
          minLength: 1,
          source: function(request, response) {
              $.ajax({
                  url: "welcome/search/",
                  data: { term: $(".find_group_ac").val()},
                  dataType: "json",
                  type: "POST",
                  success: function(data){ response($.map
                          (data, function(obj) {
                              return {
                              label: obj.name + ': ' + obj.description,
                              value: obj.name,
                              id: obj.name
                  };}));}
              });
          }
      }).data( "autocomplete" )._renderItem = function( ul, item ) {
              return $( "&lt;li&gt;&lt;/li&gt;" )
                  .data( "item.autocomplete", item )
                  .append( "&lt;a&gt;" + item.label + "&lt;br&gt;" + item.desc + "&lt;/a&gt;" )
                  .appendTo( ul );
          };
  });
  </code></pre>
  
  <p>This might seem like a lot to answer, but I'm sure it will be valuable to many javascript newbies and certainly myself.</p>