Bootstrap: Customize the typeahead() render method

Earlier in the week, I was looking to customize how the Bootstrap typeahead() plugin was rendering the autocomplete options. Surprisingly, looking at the options listed on the plugin there is no way to specify a custom renderer function. Poking around a bit, I ran across this pull request on GitHub it looks like changes to the typehead() plugin have been tabled since it’s going to be replaced in Bootstrap 3.0 anyway.

I didn’t really want to customize our version of Bootstrap for a single page so I went on the hunt looking for a way to customize the renderer without modifying the plugin. Looking at how the typeahead() plugin is instantiated I noticed that a reference to the “Typeahead()” object with the render() method is actually stored using data() for the element it’s activated on. Because of that, it’s actually relatively straightforward to just overwrite the render() method on the specific element that you’ve activated typeahead() on.

The code I ended up with basically looks like:

Anyway, just a fun tidbit. Questions or comments welcome as always.

Posted In: Javascript

Tags: , ,

  • Or to change it globally, once instantiated, $(“#typeAheadTest”).data(“typeahead”).constructor.prototype.render =

  • Batbayar Bazarragchaa

    Really helpful post :)

  • Adam


    Just trying to understand this code before using it in my project.

    What is ‘i’ meant to represent? I’m getting confused trying to work this out as according to the jQuery docs, the ‘map’ function doesn’t have this syntax available:

    items = $(items).map(function (i, item) { …

    Also what is ‘i’ meant to be? Seems it’s either the array being passed, or you’re re-initialising it straight away…?

    Don’t suppose you would be able to clarify what is happening here please?


  • The jQuery docs are a bit confusing here. There’s two “map” functions, one to process regular arrays and one that operates on DOM elements returned from $(…) calls. is the one that’s being used here.

    Inside that callback, “i” is going to be a DOM element that is being autocompleted. If you throw a “console.log(i)” inside that callback you should see which element its looking at as you type something into the autocompleter.

    What the code is basically doing is overwriting the “render” function to return a modified DOM element based on the day of the week.

  • Adam

    Great, thanks – you’re right, I was looking at the docs for $.map which deals with regular arrays.

    My confusion with ‘i’ is that it seems to be used in two placed with two different meanings – its use in ‘items = $(items).map(function (i, item) { …’ seems to be used as the index variable, and then a few lines later it’s overridden to mean something else. Just preference really to call it something else.

    I realised later however that my issues when refactoring this code weren’t down to misunderstanding what is going on with the map function, but they were down to me blindly replacing the .attr(‘data-value’, item) call with .data(‘value’, item) – didn’t realise that the bootstrap-typeahead code reads directly from the DOM using .attr() whereas our convention here is to always use .data() for these things.

    Thanks again.