{"id":1375,"date":"2022-08-30T15:16:00","date_gmt":"2022-08-30T15:16:00","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/15\/twitter-bootstrap-typeahead-with-static-data-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:00","modified_gmt":"2022-08-30T15:16:00","slug":"twitter-bootstrap-typeahead-with-static-data-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/twitter-bootstrap-typeahead-with-static-data-collection-of-common-programming-errors\/","title":{"rendered":"Twitter Bootstrap Typeahead With Static Data-Collection of common programming errors"},"content":{"rendered":"<p>I need to use typeahead for very large data. Generation of data consumes 4-5 seconds. So I cannot make Ajax calls each time. I download and cache the data upon user request. My code is the following:<\/p>\n<pre><code>$(\"#build-package-list-btn\").click(function(){\n        $.get**JSON**(\"\/packages\", function(data){\n            \/\/ data is an array\n            $(\"#typeahead-packages\").typeahead({source:data});\n            console.log(data == null); \/\/ returns false\n        });\n    })\n<\/code><\/pre>\n<p>It gives no error but whenever I try to write to typeahead text box, it gives me the following error:<\/p>\n<pre><code>Uncaught TypeError: Cannot call method 'toLowerCase' of null bootstrap.js:1644\nTypeahead.matcher bootstrap.js:1644\n(anonymous function) bootstrap.js:1631\ne.extend.grep jquery-1.7.2.min.js:2\nTypeahead.lookup bootstrap.js:1630\nTypeahead.keyup bootstrap.js:1738\ne.extend.proxy.g jquery-1.7.2.min.js:2\nf.event.dispatch jquery-1.7.2.min.js:3\nf.event.add.h.handle.i jquery-1.7.2.min.js:3\n<\/code><\/pre>\n<p>My typeahead is like this (JADE)<\/p>\n<pre><code>input#typeahead-packages(type=\"text\",data-provide=\"typeahead\")\n<\/code><\/pre>\n<p>Also in the Chrome Console I tried:<\/p>\n<pre><code> $(\"#typeahead-packages\").typeahead({source:[\"abcdef\",\"abcddd\",\"abcccc\"]});\n<\/code><\/pre>\n<p>But typeahead does not give an error but it also does not work. I cannot find what am I doing wrong. I am using the 2.0.4 bootstrap.<\/p>\n<p><strong>EDIT:<\/strong> I changed it to getJSON from get it did not help. However when I construct data like this, it is working:<\/p>\n<pre><code>data = [new String((data[0])), new String((data[5]))];\n<\/code><\/pre>\n<ol>\n<li>\n<p>Based on your update, the problem comes from the JSON.<\/p>\n<blockquote>\n<p>Important: As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. (source)<\/p>\n<\/blockquote>\n<p>You should concentrate on the source of the items. be sure that this is an array of strings. Your error suggest <code>data<\/code> is a string.<\/p>\n<p>You can use the Chrome Console (or any of your choice), under the <em>Network tab<\/em>, and spy on the actual results of your AJAX request. JSONLint is an interesting tool to validate your result.<\/p>\n<p>Then your next problem will be to update the source of an already initialized typeahead. You can use the following code :<\/p>\n<pre><code>var $myTypeahead = $('#myTypeahead');\nvar typeaheadObj = $myTypeahead.data('typeahead');\nif(typeaheadObj) typeaheadObj.source = [\"abc\", \"cde\"];\n<\/code><\/pre>\n<p>Example (jsfiddle)<\/p>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-11-15 09:07:07. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>I need to use typeahead for very large data. Generation of data consumes 4-5 seconds. So I cannot make Ajax calls each time. I download and cache the data upon user request. My code is the following: $(&#8220;#build-package-list-btn&#8221;).click(function(){ $.get**JSON**(&#8220;\/packages&#8221;, function(data){ \/\/ data is an array $(&#8220;#typeahead-packages&#8221;).typeahead({source:data}); console.log(data == null); \/\/ returns false }); }) It [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1375","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1375"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1375\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}