title: Live Search results from database using AJAX, JSON
body: <p>my script returns an array of JSON, and not individual results from the database. The script is designed to retrieve from the database records that match the text you typed. Below my codes, what could be wrong?</p>
  
  <p>PHP:</p>
  
  <pre><code>//after connect to database (succesfull)
  if($_GET['search_data'])
  {
      $search = ltrim($_GET['search']);
      $limit = 15;
      header("Content-type: application/json; charset={$charset}");
  
      $res = $conn-&gt;query("SELECT aid, name FROM titles WHERE LIKE '%".$search."%'");
      $data = array();
      while($row = $res-&gt;fetch_accoss())
      {
          $row['name'] = htmlspecialchars_uni($row['name']);
          $data[] = array('id' =&gt; $row['aid'], 'text' =&gt; $row['name']);
      }
      echo json_encode($data);
      exit;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          $(document).ready(function(){
          $("#search").keyup(function(){
              var text = $(this).val();
              $.ajax({
                  type: "POST",
                  url: "search.php?get=search_data",
                  dataType: 'JSON',
                  data: "text=" + text,
                  async: false,
                  success: function(text) {
                      if(text)
                      {
                              $('#display').append(JSON.stringify(text))
                      }
                      else
                      {
                          $('#display').append('No results!');
                      }
                  }
  
              });
          });
      });&lt;/script&gt;
          &lt;title&gt;Live search&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;br /&gt;
          search: &lt;input type="textbox" value="" name="search" placeholder="Write here..." id="search" /&gt;
          &lt;br /&gt;
          &lt;div id="display"&gt;&lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and results:</p>
  
  <pre><code>[{"id":"10","text":"Dropdowns"},{"id":"9","text":"Accordions"},{"id":"5","text":"Convert Weights"},{"id":"3","text":"Animated Buttons"},{"id":"8","text":"Side Navigation"},{"id":"6","text":"Parallax"},{"id":"2","text":"HTML Includes"},{"id":"7","text":"Progress Bars
  "},{"id":"4","text":"Top Navigation"},{"id":"1","text":"Range Sliders"},{"id":"11","text":"Google Maps"}]
  </code></pre>
  
  <p>My problem is that it shows when you type some letters the whole array of JSON, and not only the record, which we expect. What can I do?</p>