how to re-initialize typeahead

[barsh]

What is the recommended approach for re-initializing typeahead to change a prefetch, a dataset, or some other property?

[jharding]

There's not really a good way of doing this right now. Perhaps this is something we can look to add in v0.9.

[Kartones]

CORRECTION: The code below does not work neither :( data is not being prefetched again. I guess the only solution so far is to do an AJAX refresh with jQuery + .html() so the JS is executed...

We are currently doing this hacky approach to "reset" a typeahead:

Given this markup:

And this JS:
var tagsData = [
{
name: 'tags',
limit: 20,
template: "tag",
ttl_ms: 5 * 1e3, /* so any full page reload gets the new tags */
engine: autofillTemplateEngine,
prefetch: "xxxxxxxx"
}
];

We init it:
$('#tagFilter').typeahead($.extend([], tagsData));

And we call this function to reset it without a full page reload (after for example adding a new tag):
function resetTagsFilter() {
var autofill = document.getElementById("tagFilter");
if (autofill) {
autofill.parentNode.removeChild(autofill);
$("#tagFilterContainer").html("<input type="text" id="tagFilter" placeholder="Tag Filter" />");
$('#tagFilter').typeahead($.extend([], tagsData));
/* Plus here specific event handling code regarding choosing an item */
}
}

If you guys at Twitter are going to implement a nice reset solution in a near future would be great, I would prefer not to dig and modify lots of the code just to see a good approach built by you later and throw it away :)

Anyway, thanks for the component, despite the limitations it is great!

[nmstoker]

Yes, it'd be excellent if there was a reset. I leapt in and got a demo working v quickly (probably too quickly, I should have thought things through a bit more...!) and then realised the pre-fetched stuff wasn't ever being updated as it was working with the local storage copy.

Some method to drop it would be great - I'm sure there are a wide variety of scenarios people will have depending on just how static their data is and how it gets updated, but my one is that the local storage/pre-fetch items will gradually go stale and I'd thus want to refresh periodically (and maybe on demand) with the compromise being between maintaining 100% accuracy and using local storage for speed / minimising server hits.

[jharding]

I'll look into implementing this functionality later this week and if all goes well, I'd be willing to ship it in v0.8.2. Stay tuned.

[alexdesi]

Thanks for this very useful feature, unfortunately I tried to use it and seems not working.
Here how I am trying to use it.
I would like to update the typeahead "#place" when the dropbox_city changes.
This is my code (simplified):
...
$("#dropbox_city").change(function () {
$('#place').typeahead('destroy');
$('#place').typeahead( {
name: 'accounts',
remote: "/get_places.json?q=%QUERY&city=" + $("#dropbox_city").val(),
template: "...{{value}}...{{address}}...",
engine: Hogan
});
});
...

I checked the code many times, the $("#dropbox_city").val() changes correctly value,
but the typeahead makes the same old call, like It was not been destroyed.
Any suggestion ?

Thanks

[johanpoirier]

Same problem than @alexdesi, the remote url never changes... any clue ?

[jharding]

The jQuery#typeahead('destroy') method reverts DOM changes and removes event listeners, it doesn't destroy backing datasets. The name option for datasets is meant to identify datasets for caching/sharing purposes. So if you do:

$('.typeahead1').typeahead({
  name: 'remote',
  remote: '/search?q=%QUERY'
});

$('.typeahead2').typeahead({
  name: 'remote',
  remote: '/path/search?q=%QUERY'
});

Both typeaheads will make requests to /search?q=%QUERY because that is what was initialized first. You can avoid this behavior by not setting name or by using different values for name.

Hope that helps. Oh and sorry @alexdesi for not responding, I'm not sure how I missed your comment.

[johanpoirier]

Ok thanks, I'll try that.

[jeffmax]

It would be very nice to be able to clear out the dataset cache. There are a few reasons that I can think of

1. Least surprise. I can only speak for myself, but I was surprised that datasources were being cached at the page level instead of the typeahead instance level. An input I had created and destroyed previously was affecting behavior later on the page. I think this may be because I am using it within something closer to a webapp than a page.
2. For dynamic apps/pages if the page is generating inputs dynamically, the code might wish to use the same datasource name.
3. Clear memory. For longer running apps, it would be nice to be able to clear the cache without completely removing typeahead from the page.

[jharding]

@jeffmax can you create a separate issue for adding something like that?

[digz6666]

Thanks, been looking for this :)

[tellex]

https://github.com/tellex/typeahead.js/commit/7a10abf0fd958883b2b009622caa977b15d26994

Added refreshCache method. So if you have multiple datasets binded to a typehead and u need to change a particular dataset value simple call $(".input-box").typeahead("refreshCache",[{name:Dataset1, url: "New URL"}]); -> Is important to always add "[]" because refreshCache expects an array of objects. This function will find all dataset cached to the typeahead and walk trought the array to find the matching dataset.name then it will check which attributes values changed and replace the new ones , refresh the associated cache object, and reinitialize the typeahead.
If u wish to add an dataset to the already existent datasets simple add the property AddDataset to the passed object. example $(".input-box").typeahead("refreshCache",[{name:NewDataSetName, local: etcetc, AddDataset: true}])

I added an new event called typeahead:dropdownOpened the reason behind this is that if add a new refreshCache dataset i will reinitialize the typeahead and destroy previously DOM created object ... so if u have binded an event to a element in the displayed suggestions Box it will be lost.... the solution to this:
Once you created the typeahead add
$(".input-box").on("typeahead:dropdownOpened",function(){
$('.special-suggestion-button').bind('click',function(event){ alert("Custom function"); event.stopImmediatePropagation() } );
});
I do this because if u do $('.tt-dropdown-menu').on('suggestionsRendered',function()).... and call new method refreshCache i will reinitialize the whole DOM object and destroy .tt-dropdown-menu so... the binded "on" will be lost...

Hope you enjoy the new function , sorry for my bad grammar my native languaje is spanish....

Greetings from argentina!!!

[tellex]

I forgot to mention to complete destroy cache objects call $('....').typeahead('destroy','NoCached')

[easikoglu]

var url = javaRest.rPath + '/role/auto?searchKeyword'; var list = []; $('#user-edit-companyName').typeahead([ { name: "test", prefetch: list, remote: { url: url + '=%QUERY', filter: function (data) { list.push(data); return data; } } } ]); what about this one?

[bschaeffer]

@jharding thanks for that comment... totally got me out of the jam I was in.

[jonathanstegall]

@jharding same here. #41 (comment) saved me on an Ajax application.

[rushdy20]

hi is there a i am using * typeahead.js 0.10.5 is there a way i can change the typeahead source and template on runtime?
basically i got a drop down and from that drop to select the options. and the source and the template needs to change according to the option selected

[JulesMarcus]

@rushdy20 Did you ever find a way to do this? I have the exact same problem. Right now I initialize the typeahead in a focusOut event from an other input field, but it isn't working that well.

[vickyveera10]

im using typehead in item search in text box (get value from the localstorage) after add new data it's stored in to local storage this new data came in localstorage which i use localstorage value alert. but this typehead not coming that localstorasge new data.[Please kindly help me how to get local storage new added data get it in to the typehead prefetch]

[pierodc]

How can I have 2 or more autofill fields with typehead that calls diferents data arrays for example, one for city and other for county?