title: Change the local source to database source
body: <p>How can I change the source (in line 13) from local to my database?</p>
  
  <p>I want to have the suggestions retrieve from the database.</p>
  
  <p>I too hope that the suggestions style will be similar to typeahead.js.</p>
  
  <p>This is my current code:</p>
  
  <pre><code>&lt;html&gt;
  
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link href="//raw.github.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css" rel="stylesheet" media="screen"&gt;
      &lt;script src="//twitter.github.com/typeahead.js/releases/latest/typeahead.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $('.q.typeahead').typeahead({                               
                  name: "q",                
                  local: ['italy', 'france', 'england', 'united states', 'brazil', 'spain']                                              
              });
          });
      &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
          //document.getElementById("suggestion")
  
              function getSuggestion(q) {
  
              var ajax;
              if(window.XMLHttpRequest)//for ie7+, FF, Chrome
                  ajax = new XMLHttpRequest();//ajax object
              else
                  ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
              ajax.onreadystatechange = function() {
                  if(ajax.status === 200 &amp;&amp; ajax.readyState === 4) {
                      //if result are not there then don't display them
                      if(ajax.responseText === "")
                          document.getElementById("suggestion").style.visibility = "hidden";
                      else {
                          document.getElementById("suggestion").style.visibility = "visible";
                          document.getElementById("suggestion").innerHTML = ajax.responseText;
                      }
                  }
              };
              ajax.open("GET", "suggestion.php?q=" + q, false);
              ajax.send();
          }
      &lt;/script&gt;
  
      &lt;input type="text" class="q typeahead" id="citiesInput" /&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks in advance.</p>