繁体   English   中英

Twitter Bootstrap提前输入静态数据

[英]Twitter Bootstrap Typeahead With Static Data

对于非常大的数据,我需要使用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"]});

但是,提前输入不会产生错误,但是也无法正常工作。 我找不到我在做什么错。 我正在使用2.0.4引导程序。

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

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

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

jQuery.getJSON()

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

您应该专注于项目的来源。 确保这是一个字符串数组。 您的错误提示data是字符串。

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

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

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

例子(jsfiddle)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM