title: How to fetch data from MySQL database and use in a javascript autocomplete?
body: <p>I'm building an autocomplete with <a href="https://jqueryui.com/autocomplete/" rel="nofollow noreferrer">jQuery autocomplete</a>. To accomplish this I have stored 216 data records of industries in a table. I would like to fetch that table and use in javascript array for the autocomplete. You can see what I have tried so far but I'm getting null. My question is how do I fetch the data from the database and make it an array I can use in a javascript array for the autocomplete?</p>
  
  <p><strong>table</strong></p>
  
  <pre><code>id | industryName
  1  | Air Transport
  2  | Agriculture
  ...
  </code></pre>
  
  <p><strong>autocomplete.php</strong></p>
  
  <pre><code>&lt;div class="ui-widget"&gt;
    &lt;label for="industries"&gt;Industries: &lt;/label&gt;
    &lt;input id="industries"&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
          $.ajax({
             url : 'industries.php',
             type : 'GET',
             success : function(data){
                var availableIndustries = jQuery.parseJSON(data);
  
          $( function() {
          $( "#industries" ).autocomplete({
            source: availableIndustries
          });
        } );
             }
          });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>industries.php</strong></p>
  
  <pre><code>include 'includes/database.php';
  
   $sql = "SELECT * FROM industries";
   $result= $conn-&gt;query($sql);
   echo json_encode($result);
  </code></pre>