title: jquery autocomplete json
body: <p>I'm trying to have a autocomplete input on my form and I'm having problems getting the data to display. There are a ton of posts on this but also what seems like as many different ways of doing it. I've been trying to follow the examples on the jquery site but I guess I'm just not getting the return data correct? My page looks like:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;                                         
  $(document).ready(function() {
      $( "#Codes" ).autocomplete({
          source: function( request, response ) {
              $.ajax({                   
                     url: "/jreqlib",
                     dataType: "json",
                     data: {
                         featureClass: "P",
                         style: "full",
                         maxRows: 25,
                      },
                      success: function( data ) {
                          response( $.map( data, function( item ) {
                              return {
                                  label: item.name,
                                  value: item.name
                              }
                          }));
                      }
                  });
          },
          minLength: 1,
          open: function() {
          $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
          },
          close: function() {
              $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
          }
     });
  });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form&gt;
      &lt;input id="Codes"&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I'm returning from the server looks like this:</p>
  
  <pre><code>[{"1234":"1234"},{"134":"134},{"567":"567"}]
  </code></pre>
  
  <p>What I would love is when I click in the box, it shows me "1234" and "567" and if I type 1 then  "1234" and "134" would appear, if i type in 12 then just "1234" would appear ect.</p>
  
  <p>Any help would be appreciated
  TIA</p>