Skip to content
New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to re-initialize typeahead #41

Closed
barsh opened this issue Feb 25, 2013 · 20 comments

Comments

@barsh
Copy link
Contributor

commented Feb 25, 2013

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

@jharding

This comment has been minimized.

Copy link
Contributor

commented Feb 25, 2013

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

This comment has been minimized.

Copy link

commented Feb 25, 2013

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

This comment has been minimized.

Copy link

commented Feb 25, 2013

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

This comment has been minimized.

Copy link
Contributor

commented Feb 25, 2013

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

This comment has been minimized.

Copy link

commented Mar 10, 2013

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

This comment has been minimized.

Copy link

commented Apr 9, 2013

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

@jharding

This comment has been minimized.

Copy link
Contributor

commented Apr 9, 2013

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

This comment has been minimized.

Copy link

commented Apr 9, 2013

Ok thanks, I'll try that.

@jeffmax

This comment has been minimized.

Copy link
Contributor

commented Apr 29, 2013

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

This comment has been minimized.

Copy link
Contributor

commented Apr 30, 2013

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

@digz6666

This comment has been minimized.

Copy link

commented Sep 10, 2013

Thanks, been looking for this :)

@tellex

This comment has been minimized.

Copy link

commented Nov 12, 2013

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

This comment has been minimized.

Copy link

commented Nov 12, 2013

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

@easikoglu

This comment has been minimized.

Copy link

commented Dec 26, 2013

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

This comment has been minimized.

Copy link

commented Mar 18, 2014

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

@jonathanstegall

This comment has been minimized.

Copy link

commented Mar 26, 2014

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

sheeley pushed a commit to sheeley/typeahead.js that referenced this issue Nov 21, 2015

@rushdy20

This comment has been minimized.

Copy link

commented Mar 14, 2017

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

This comment has been minimized.

Copy link

commented Jun 1, 2017

@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

This comment has been minimized.

Copy link

commented Oct 11, 2017

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

This comment has been minimized.

Copy link

commented Jan 30, 2018

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.