Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Allow loading images and custom HTML in typeahead results #2441

toddCummings opened this Issue Mar 7, 2012 · 7 comments


None yet
7 participants

Was hoping to achieve something like this:


Does typeahead offer any way to support the loading of images / custom-html? Any simple, recommended workaround?



yep, I agree


fat commented Mar 20, 2012

yep it totally does.

Using a combination of the item and menu options you can specify new templates... these are your defaults:

  $.fn.typeahead.defaults = {
    source: []
  , items: 8
  , menu: '<ul class="typeahead dropdown-menu"></ul>'
  , item: '<li><a href="#"></a></li>'

if you wanted to get really crazy you could even extend the render method:

$.fn.typeahead.Constructor.prototype.render = myCoolNewFunction

@fat fat closed this Mar 20, 2012

arcanis commented Dec 12, 2012

Not sure what you think about it, but maybe it would be nice to have an option to specify custom class names without having to set the whole menu element. Something like :

<input type="text" data-provide="typeahead" data-provider-class="custom" />

arcanis commented Dec 12, 2012

Oh well, forget what I've said. With the latest version, it's far simpler to just make something like :

<div class="custom">
    <input type="text" data-provide="typeahead" />

and theming using

.custom .typeahead {
    background: pink;
    color: yellow;

Kudos !

tacone commented Jan 14, 2013

Had the same need and came up with this:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment