Question

112

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

rated 0 times [ 114] [ 2] / answers: 1 / hits: 20651 / 12 Years ago, sun, june 3, 2012, 12:00:00

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

Thanks in advance.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

benitoh

Add To Favorites

Follow

Total Points: 150

Total Questions: 113

Total Answers: 104

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

benitoh questions

1 this.$refs empty with Vue 3 Options API

Sun, Mar 21, 21, 00:00, 3 Years ago

1 Close sidebar menu when click outside of it and when click on menu item

Fri, May 22, 20, 00:00, 4 Years ago

1 TypeORM Custom Repository, select distinct values from specified column

Mon, May 4, 20, 00:00, 4 Years ago

1 How can I enable the console log in VUE-CLI during development

Tue, Dec 17, 19, 00:00, 5 Years ago

1 String interpolation in graphQL query

Mon, May 13, 19, 00:00, 5 Years ago

View All

answered 12 Years ago tomas · Accepted Answer

Use the highlighter method:

$('.typeahead').typeahead({

    highlighter: function(item){

        return <div>.......</div>;

    }

});

Method used to highlight autocomplete results. Accepts a single
argument item and has the scope of the typeahead instance. Should
return html.