title: Using jQuery autocomplete with AJAX & JSON
body: <p>I am trying to use the jQuery UI autocomplete widget but without success. There is no list of matches presented.</p>
  
  <p>My script is as follows:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="./jquery-1.11/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="./jquery-ui-1.11.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $("#tags").autocomplete({
    source: function( request, response ) {
       $.ajax({
         url: "testAJAX.php",
         type: "POST",
         dataType: "json",
         data: {term: request.term},
         success: function(data) {
           response(data);
        }
       });
     } 
   });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input type="text" id ="tags" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>On the server my PHP code is as follows:</p>
  
  <pre><code>&lt;?php include "dbConnect.php";
  header('Content-type: application/json');
  
  $q=$_POST["term"]; 
  
  $sql="SELECT name, id as value, id FROM sample WHERE id LIKE '".strtoupper($q)."%';";
  
  $result =  mysqli_query($con, $sql);
  
  $rows = array();
  while($r = mysqli_fetch_array($result)) {
    $rows[] = $r;
  }
  
  $json  = json_encode($rows);
  echo $json;
  </code></pre>
  
  <p>I have checked that the AJAX and JSON is working by using the following JQuery script that does output the values from the php. </p>
  
  <pre><code>&lt;script&gt;
    $(document).ready(function(){
      $('#path').keyup(function(){
        var t = $('#path').val();
        $.ajax({
          type: "POST",
          url: "testAJAX.php",
          data: {term: t},
          dataType: 'json',
          success: function( data ) {
            $('#tags').html('');
            for (var i in data) {
              $('#tags').append(data[i].value + '&lt;br/&gt;');
            }
          }
        });
      });
    }); 
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input type="text" id="path" /&gt;
  &lt;div id="tags"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>