typeahead.js - Issue with re-initializing typeahead -

this requirement: need user input text box, when user enters text has show suggestions local data remote data (results comes server based on input text). when user re-enters different text has search again in local , again call server new data.

i tried using twitter typeahead. able show suggestions local remote data once typeahead doesn't make remote call has prefetched data in memory. tried destorying , re-initializing typeahead on each user input (only if user input different previous one, check there). getting below error:

"typeerror: this.$menu null"

can tell me can cause of issue? below code samples (these test page created sort out problem):

typeahead initialization property -

var props = {             template:'<div>{{name}}_{{id}}</div>',             local:[                 {id:"val1", name:"india"},                 {id:"val2", name:"indiana"},                 {id:"val3", name:"abcindjgaja"}             ],             limit:10000,             valuekey:'name',             cache:false,             remote:{                 url:<myurl>,                 beforesend:function (jqxhr, settings) {                     settings.url += $("#myti").val();  //myti id of input text box                 },                 filter:function (data) {                     var dataset = [];                     (var = 0; < data.length; i++) {                         if ((data[i].name.tolowercase()).indexof($("#myti").val().tolowercase()) != -1) {                             dataset.push({                                 name:data[i].name,                                 id:data[i].id                             });                         }                     }                     return dataset;                 }             },             engine:{                 compile:function (template) {                     return {                         render:function (ctx) {                             var temp = handlebars.compile(template);                             return temp(ctx);                         }                     }                 }             }         }; 

logic initializing/re-initializing -

$("#myti").keyup((function () {             return function (e) {                 if (window[window.text]) {                     cleartimeout(window[window.text]);                 }                 window.text = $("#myti").val();                 window[window.text] = window.settimeout(process, 250);                  function process() {                     var datafound = false;                     (var key in window.datamap) {                         if (!window.datamap.hasownproperty(key)) {                             continue;                         }                         if (window.text.indexof(key) != -1) {                             datafound = true;                             window.datasetname = window.datamap[key];                             updatetypeahead();                             break;                         }                     }                     if (!datafound) {                         window.datasetname = "typeahead" + parseint(math.random() * 1000, 10);                         window.datamap[window.text] = window.datasetname;                         updatetypeahead();                     }                 }             }         }()));         if (!window.tyepahead) {             updatetypeahead();         }          function updatetypeahead() {             if (window.tyepahead) {                 window.tyepahead.typeahead('destroy');             }             props.name = window.datasetname;             window.tyepahead = $("#myti").typeahead(props);         } 

i think destroy , reinitialize not needed in case. force typeahead not cache remote call (you putting cache: false in wrong place):

var props = {     template:'<div>{{name}}_{{id}}</div>',     local: [         {id:"val1", name:"india"},         {id:"val2", name:"indiana"},         {id:"val3", name:"abcindjgaja"}     ],     limit: 10000,     valuekey: 'name',     remote: {         url: <myurl>,         cache: false, // move cache: false here         beforesend: function (jqxhr, settings) {             settings.url += $("#myti").val();  //myti id of input text box         },         filter: function (data) {             var dataset = [];             (var = 0; < data.length; i++) {                 if ((data[i].name.tolowercase()).indexof($("#myti").val().tolowercase()) != -1) {                     dataset.push({                         name:data[i].name,                         id:data[i].id                     });                 }             }             return dataset;         }     },     engine: {         compile:function (template) {             return {                 render:function (ctx) {                     var temp = handlebars.compile(template);                     return temp(ctx);                 }             }         }     } }; 

working fiddle: http://jsfiddle.net/hieuh25/lpgv5/1/

hope helps.