How to customize Bootstrap typeahead layout/function for more than just text?

Posted by Loolooii on Stack Overflow See other posts from Stack Overflow or by Loolooii
Published on 2012-06-03T19:33:42Z Indexed on 2012/10/17 17:02 UTC
Read the original article Hit count: 230

Filed under:
|
|
|

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: custom typeahead.

Basically I need something like this as each result item:

<div class="resultContainer">
  <div class="resultImage"><img /></div>
  <div class="resultDesc"></div>
  <div class="resultLabel"></div>
</div>

Now it's:

<li><a href="#"></a></li>

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 <li>. 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: enter image description here

Thanks in advance.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html