Twitter Bootstrap Typeahead与静态数据

时间:2012-07-05 09:47:51

标签: javascript ajax twitter-bootstrap typeahead

我需要对非常大的数据使用typeahead。生成数据消耗4-5秒。所以我不能每次都进行Ajax调用。我根据用户请求下载并缓存数据。我的代码如下:

$("#build-package-list-btn").click(function(){
        $.get**JSON**("/packages", function(data){
            // data is an array
            $("#typeahead-packages").typeahead({source:data});
            console.log(data == null); // returns false
        });
    })

它没有错误,但每当我尝试写入预先输入文本框时,它都会给我以下错误:

Uncaught TypeError: Cannot call method 'toLowerCase' of null bootstrap.js:1644
Typeahead.matcher bootstrap.js:1644
(anonymous function) bootstrap.js:1631
e.extend.grep jquery-1.7.2.min.js:2
Typeahead.lookup bootstrap.js:1630
Typeahead.keyup bootstrap.js:1738
e.extend.proxy.g jquery-1.7.2.min.js:2
f.event.dispatch jquery-1.7.2.min.js:3
f.event.add.h.handle.i jquery-1.7.2.min.js:3

我的先行者就像这样(JADE)

input#typeahead-packages(type="text",data-provide="typeahead")

同样在Chrome控制台中,我尝试了:

 $("#typeahead-packages").typeahead({source:["abcdef","abcddd","abcccc"]});

但是,typeahead不会出错,但也不起作用。我找不到我做错了什么。我正在使用2.0.4引导程序。

编辑:我将其更改为getJSON来获取它没有帮助。但是,当我构建这样的数据时,它正在工作:

data = [new String((data[0])), new String((data[5]))];

1 个答案:

答案 0 :(得分:0)

根据您的更新,问题来自JSON。

  

jQuery.getJSON()

     

重要提示:从jQuery 1.4开始,如果JSON文件包含语法错误,则请求通常会以静默方式失败。   (source

你应该专注于物品的来源。确保这是一个字符串数组。您的错误建议data是一个字符串。

您可以在网络标签下使用Chrome控制台(或任何您选择的),并监视您的AJAX请求的实际结果。 JSONLint是验证结果的有趣工具。

然后您的下一个问题是更新已初始化的预先输入的来源。您可以使用以下代码:

var $myTypeahead = $('#myTypeahead');
var typeaheadObj = $myTypeahead.data('typeahead');
if(typeaheadObj) typeaheadObj.source = ["abc", "cde"];

Example (jsfiddle)