title: Typeahead / Select2 support for Bootstrap 3
body: <p>I'm building a google-style text box that auto-completes typed text.</p>
  
  <p>Using typeahead with <a href="https://github.com/jharding/typeahead.js-bootstrap.css" rel="nofollow">typeahead.js-bootstrap.css</a>:</p>
  
  <pre><code>$(document).ready(function() {
     $('#op1').typeahead({
        remote: '/search/%QUERY',
     });
  });
  
  &lt;input type="text" id="op1"&gt;
  </code></pre>
  
  <p>it <strong>worked</strong> but there are <strong>two problems</strong>:</p>
  
  <ul>
  <li><p>I could not customize it. Whenever I make any significant style changes, or use bootstrap's <code>form-control</code> class for input element: the text box gets completely messed up.</p></li>
  <li><p>The auto-completed ("hint") text was written above the typed text so I whatever color I set  for the hint was the color of the entire text! I tried giving the hint a negative z-order but then it was not displayed at all.</p></li>
  </ul>
  
  <p>I've tried Typeahead AND Select2 auto-completion libraries with my Bootstrap 3 template, and so far the only thing I was able to work out-of-the-box without completely ruining the layout was the above code</p>
  
  <p>If anyone can solve these problems, or otherwise recommend a full CSS + JS typeahead solution for Bootstrap3, I'd be grateful :)</p>