title: JQuery autocomplete and form population using JSON
body: <p>I am having troubles implementing JQuery autocomplete using JSON.
  Basically, I get an JSON encoded data from my server (I use codeigniter php framework).</p>
  
  <p>The JSON format is following:</p>
  
  <pre><code>[
      {
          "id": "1",
          "prodname": "Candy",
          "code": "CND01",
          "uname": "grams",
          "pcname": "Sweets"
      },
      {
          ...
      } 
  ]
  </code></pre>
  
  <p>So, the autcomplete goes on the Product(prodname) field (in the red rectangle on the image). When certain 
  product is selected, the ID,Code,Category and UOM get populated.</p>
  
  <p>These are my input fields:</p>
  
  <pre><code>&lt;input type="text" name="id" value="" id="id" size="3"  /&gt;
  &lt;input type="text" name="code" value="" id="code" size="5"  /&gt;
  &lt;input type="text" name="prodname" value="" id="prodname" size="30"  /&gt;
  &lt;input type="text" name="category" value="" id="category"  /&gt;&lt;/td&gt; 
  &lt;input type="text" name="quantity" value="" id="quantity" size="3"  /&gt; 
  &lt;input type="text" name="uom" value="" id="uom" size="5"  /&gt;
  &lt;button name="add" type="button" &gt;Add&lt;/button&gt;
  </code></pre>
  
  <p>How can I achieve that?</p>
  
  <p>Thank you very much upfront!</p>
  
  <p><img src="https://i.stack.imgur.com/kEsoi.png" alt="enter image description here"></p>
  
  <p>SOLUTION:</p>
  
  <pre><code>$.ajax({
          dataType: 'json',
          async: false,
          success: function(data) {
              projects = data;
          },  
          url: '&lt;?php echo site_url('products/autocomplete/no'); ?&gt;'
      });
              //Autocomplete
                  $( "#prodname" ).autocomplete({
                      source: projects,
                      focus: function( event, ui ) {
                          $( "#prodname" ).val( ui.item.prodname );
                          return false;
                      },
                      select: function( event, ui ) {
                          $( "#prodname" ).val( ui.item.prodname );
                          $( "#id" ).val( ui.item.id );
                          $( "#code" ).val( ui.item.code );
                          $( "#category" ).val( ui.item.pcname );
                          $( "#uom" ).val( ui.item.uname );
                          return false;
                      }
                  })
                  .data( "autocomplete" )._renderItem = function( ul, item ) {
                      return $( "&lt;li&gt;&lt;/li&gt;" )
                          .data( "item.autocomplete", item )
                          .append( "&lt;a&gt;" + item.prodname + "&lt;/a&gt;" )
                          .appendTo( ul );
  
                  };
  </code></pre>