Refreshing local data with typeahead.js

Here's the three step process to follow to refresh local data with typeahead.js

If you are using local data or prefetched data with typeahead.js and you want to refresh that data there is a three step process;

  1. Do not pass a name into your typeahead, doing so will initiate LocalStorage and your changes will not be registered.
  2. When you want to refresh the data, you first need to destroy the current typeahead instance .typeahead(‘destroy’) will accomplish this.
  3. Next we need to recall typeahead with the updated local values or prefetched value.

That first point is important and caused me a few headaches, hopefully upon reading this you will avoid those same headaches with typeahead.js Here is a quick example;

var items = ['aaa', 'bbb', 'ccc'];

$('#item').typeahead({
  local: items
});

$('#add_item').click(function() {
  items.push('ddd');
  $('#item').typeahead('destroy');
  $('#item').typeahead({
    local: items
  });
});

Once #add_item is clicked, ‘ddd’ will be searchable. This is taken from the “Instant Typeahead.js book I have written.

Recent posts View all

SEOInterviews

WebLinkR Interview - we spoke with SEO Reddit Mod WebLinkR about, well, SEO

A short interview with SEO Reddit Mod WebLinkR about some of their SEO thinking.

Productivity Web Dev

81% of people more wary of dependencies due to AI

We polled people about how they felt about software dependenices since more folk used AI