title: PHP Instant Search of MySQL Database using AJAX, Twitter Typeahead Fails
body: <p>I am trying to implement an instant search on an html page using Twitter Typeahead, and it doesn't respond when text is typed into the search box, and there are no errors in chrome's javascript console.</p>
  
  <p>All the code being used is totally simplified, so it seems very strange that this would be happening.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>sql to create database:</p>
  
  <pre><code>CREATE DATABASE `library`;
  USE `library`;
  
  CREATE TABLE IF NOT EXISTS `books` (
    `id` int(10) NOT NULL AUTO_INCREMENT,
    `title` varchar(100) NOT NULL,
    `author` varchar(30) NOT NULL,
    `isbn` varchar(30) NOT NULL,
    PRIMARY KEY (`id`)
  ) ENGINE=InnoDB  DEFAULT CHARSET=latin1_swedish_ci AUTO_INCREMENT=6;
  
  INSERT INTO `books` (`id`, `title`, `author`, `isbn`) VALUES
  (1, 'Learning PHP, MySQL &amp; JavaScript', 'Robin Nixon', 'ISBN-13: 978-1491918661'),
  (2, 'PHP and MySQL for Dynamic Web Sites', 'Larry Ullman', 'ISBN-13: 978-0321784070'),
  (3, 'PHP Cookbook', 'David Sklar', 'ISBN-13: 978-1449363758'),
  (4, 'Programming PHP', 'Kevin Tatroe', 'ISBN-13: 978-1449392772'),
  (5, 'Modern PHP: New Features and Good Practices', 'Josh Lockhart', 'ISBN-13: 978-1491905012');
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="typeahead.bundle.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  window.onload = function() {
      if (window.jQuery) {  
          alert("jQuery is loaded");
      } else {
          alert("jQuery is not loaded");
      }
  }
  &lt;/script&gt;
  
      &lt;title&gt;AJAX PHP Search Engine Script for MySQL Database&lt;/title&gt;
      &lt;style type="text/css"&gt;
      .se-example    {
          font-family: sans-serif;
          position: relative;
          margin: 100px;
      }
      .typeahead {
          background-color: #FFFFFF;
      }
      .typeahead:focus {
          border: 1px solid #999999;
      }
      .tt-query {
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
      }
      .tt-hint {
          color: #999999;
      }
      .typeahead, .tt-query, .tt-hint {
          border: 1px solid #CCCCCC;
          border-radius: 4px;
          font-size: 16px;
          height: 38px;
          line-height: 30px;
          outline: medium none;
          padding: 8px 12px;
          width: 396px;
      }
      .tt-dropdown-menu {
          background-color: #FFFFFF;
          border: 1px solid rgba(0, 0, 0, 0.2);
          border-radius: 4px;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          margin-top: 12px;
          padding: 8px 0;
          width: 422px;
      }
      .tt-suggestion {
          font-size: 16px;
          line-height: 24px;
          padding: 3px 20px;
      }
      .tt-suggestion p {
          margin: 0;
      }
      .tt-suggestion.tt-is-under-cursor {
          background-color: #999999;
          color: #FFFFFF;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="se-example"&gt;
          &lt;input id="searchbox" type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Search for Book Name..."/&gt;
      &lt;/div&gt;
      &lt;script&gt;
      $(document).ready(function(){
          $('#searchbox').typeahead({
              remote: 'search.php?st=%QUERY'
          });
          console.log("typeahead fired");
      });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>search.php</p>
  
  <pre><code>&lt;?php
  
  $str = $_GET['st'];
  
  $connection = mysqli_connect("localhost", "username", "password", "library");
  
  $sql = "SELECT title FROM books WHERE title LIKE '%{$str}%'";
  
  $result = mysqli_query($connection, $sql);
  
  $array = array();
  while($row = mysqli_fetch_assoc($result)) {
      $array[] = $row['title'];
  }
  echo json_encode($array);
  ?&gt;
  </code></pre>