title: How to customize Bootstrap typeahead layout/function for more than just text?
body: <p>I'm working on a search functionality for my website and I'm using Bootstrap's typeahead to show the results. So far so good. But what I want is to extend the function so that I could add an image and some other item, say description, etc. According to this post, that is possible: <a href="https://github.com/twitter/bootstrap/issues/" rel="noreferrer">custom typeahead</a>.</p>
  
  <p>Basically I need something like this as each result item:</p>
  
  <pre><code>&lt;div class="resultContainer"&gt;
    &lt;div class="resultImage"&gt;&lt;img /&gt;&lt;/div&gt;
    &lt;div class="resultDesc"&gt;&lt;/div&gt;
    &lt;div class="resultLabel"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now it's:</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>And this doesn't even work with a longer text than the width of the typeahead. So the text doesn't go to the next line and hence doesn't fit the <code>&lt;li&gt;</code>. How can I use the the custom layout I want? (btw I have an array of arrays of results. Each sub-array contains img, desc, etc.). This is what I have right now: 
     <img src="https://i.stack.imgur.com/lhRBp.png" alt="enter image description here"></p>
  
  <p>Thanks in advance.</p>