title: Typeahead get remote data issue
body: <p>I have some products in my database and I have used an input field for searching products.
  I am using <a href="https://twitter.github.io/typeahead.js/examples/" rel="nofollow">Typeahead</a> for search products with remote data. My database for products is like this</p>
  
  <pre><code>CREATE TABLE IF NOT EXISTS `products` (
    `id_product` int(10) unsigned NOT NULL,
    `name` varchar(128) NOT NULL,
    `desc` text,
    PRIMARY KEY (`id_product`)
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
  
  --
  -- Dumping data for table `products`
  --
  
  INSERT INTO `products` (`id_product`, `name`, `desc`) VALUES
  (1,  'Apple', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
  (2,  'Box ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
  (2,  'Bat ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
  (2,  'Cat ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
  (2,  'Ant ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry');
  </code></pre>
  
  <p>And the html with js is like this</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;script src="http://code.jquery.com/jquery-2.1.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/typeahead.bundle.js"&gt;&lt;/script&gt;  
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="jquery.typeahead.css"&gt;
  &lt;style&gt;
  .tt-query,
  .tt-hint {
      width: 396px;
      height: 30px;
      padding: 8px 12px;
      font-size: 24px;
      line-height: 30px;
      border: 2px solid #ccc;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      outline: none;
  }
  
  .tt-query {
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  }
  
  .tt-hint {
      color: #999
  }
  
  .tt-dropdown-menu {
      width: 422px;
      margin-top: 12px;
      padding: 8px 0;
      background-color: #fff;
      border: 1px solid #ccc;
      border: 1px solid rgba(0, 0, 0, 0.2);
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
      -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
      box-shadow: 0 5px 10px rgba(0,0,0,.2);
  }
  
  .tt-suggestion {
      padding: 3px 20px;
      font-size: 18px;
      line-height: 24px;
  }
  
  .tt-suggestion.tt-is-under-cursor {
      color: #fff;
      background-color: #0097cf;
  
  }
  &lt;/style&gt;
  &lt;script type='text/javascript'&gt;
          //&lt;![CDATA[ 
          $(window).load(function () {
              // instantiate the bloodhound suggestion engine
              var products = new Bloodhound({
                  datumTokenizer: function (d) {
                      return Bloodhound.tokenizers.whitespace(d.value);
                  },
                  queryTokenizer: Bloodhound.tokenizers.whitespace,
                  remote: {
                      url: 'ajax.php?search_term=%QUERY',
                      filter: function (products) {
                          return $.map(products.results, function (product) {
                              return {
                                  value: product.name
                              };
                          });
                      }
                  }
              });
              // initialize the bloodhound suggestion engine
              products.initialize();
              // instantiate the typeahead UI
              $('.typeahead').typeahead(null, {
                  displayKey: 'value',
                  source: products.ttAdapter()
              });
          }); //]]&gt;
      &lt;/script&gt;   
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input class='typeahead' placeholder='Find products...' type='text' /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In ajax.php I have used my custom query like this</p>
  
  <pre><code>$dsn = 'mysql:host=localhost; dbname=products';
  $username = 'root';
  $password = 'root';
  $options = array(
      PDO::MYSQL_ATTR_INIT_COMMAND =&gt; 'SET NAMES utf8',
  ); 
  
  $dbh = new PDO($dsn, $username, $password, $options);
  $query = $_REQUEST['search_term'];
  $stmt = $dbh-&gt;prepare("SELECT name from `products` WHERE `name`  LIKE '%".$query."%' ");
  $stmt-&gt;bindParam(':query', $query, PDO::PARAM_STR);
  $stmt-&gt;execute();
  
  // populate results
  $results = array();
  foreach ($stmt-&gt;fetchAll(PDO::FETCH_COLUMN) as $row) {
      $results[] = $row;
  }
  print_r($results);
  
  // and return to typeahead
  echo json_encode($results);
  </code></pre>
  
  <p>here its in array I am getting the products name like this</p>
  
  <pre><code>Array
  (
      [0] =&gt; Bat
      [1] =&gt; Box
  )
  </code></pre>
  
  <p>with json I am also getting the data like this</p>
  
  <pre><code>["Bat","Box"]
  </code></pre>
  
  <p>But I don't know why the values are not coming in the search dropdown box? Any help and suggestions will be really appreciable. Thanks</p>
  
  <p><strong>Note</strong>
  In console I am getting error like</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'length' of undefined</code></p>