twitter bootstrap typeahead(未定义的方法'toLowerCase')

Question

我正在尝试使用twitter bootstrap从我的数据库中获取制造商.

因为twitter bootstrap typeahead不支持ajax调用我使用这个fork:

https://gist.github.com/1866577

在该页面中,有一条评论提到了如何做我想做的事情.问题是当我运行我的代码时,我继续得到:

未捕获的TypeError:无法调用未定义的方法'toLowerCase'

我谷歌搜索并试图改变我的jquery文件使用缩小和非缩小以及谷歌代码上托管的文件,我一直得到相同的错误.

我的代码目前如下:

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name',
    items:11,
    onselect: function (obj) {

    }
});

在url字段我添加了

window.location.origin

避免任何已经在另一个问题上讨论的问题

在我使用之前$.each(),然后决定$.map()在类似的问题中使用推荐的Tomislav Markovski

任何人都知道我为什么一直遇到这个问题？!

谢谢

Answer 1

Typeahead期望一个字符串列表作为源

$('#manufacturer').typeahead({
    source : ["item 1", "item 2", "item 3", "item 4"]
})

在您的情况下,您希望将它与对象列表一起使用.这样您就必须进行一些更改才能使其正常工作

这应该有效:

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer,

                        toString: function () {
                            return JSON.stringify(this);
                        },
                        toLowerCase: function () {
                            return this.manufacturer.toLowerCase();
                        },
                        indexOf: function (string) {
                            return String.prototype.indexOf.apply(this.manufacturer, arguments);
                        },
                        replace: function (string) {
                            return String.prototype.replace.apply(this.manufacturer, arguments);
                        }
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'manufacturer',
    items:11,
    onselect: function (obj) {
        var obj = JSON.parse(obj);

        // You still can use the manufacturer_id here 
        console.log(obj.manufacturer_id);

        return obj.manufacturer;
    }
});

Answer 2

在我的情况下,我得到了这个确切的错误,事实证明我使用的Bootstrap版本(2.0.4)不支持将函数传递给source设置.

升级到Bootstrap 2.1.1修复了问题.

Answer 3

更新/修改后的问题: 当我在不支持AJAX的bootstrap中使用原始的Typeahead扩展时,我提到了"无法调用方法'toLowerCase'的未定义错误".(正如您所发现的)您确定原始的预先版本扩展名未加载,而不是您修改后的版本吗？

我已经成功地使用了这种类型的要点,这与你提到的那个略有不同.一旦我切换到Gist并确认输入数据是好的(测试输入是JS对象中的字符串数组,问题就消失了.

希望这可以帮助

原始答案:

发生错误的原因是因为传递给typeahead matcher函数的值未定义.这只是在输入和匹配函数之间发生的真实问题的副作用.我怀疑'制造商'阵列有问题.首先测试它以验证您是否有一个有效的数组.

// It appears your array constructor is missing ()
// try the following in your binding code:
var manufacturers = new Array();

这是我用来将输入绑定到typeahead的内容.我确认它适用于你修改过的前叉.

我的HTML:

<!-- Load bootstrap styles -->
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
...

<input type="text" class="typeahead" name="Category" id="Category" maxlength="100" value="" />

...
<!-- and load jQuery and bootstrap with modified typeahead AJAX code -->
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="bootstrap-modified-typeahead.js" type="text/javascript"></script>

我的绑定JavaScript代码:

// Matches the desired text input ID in the HTML
var $TypeaheadInput = $("#Category");  

// Modify this path to your JSON source URL
// this source should return a JSON string array like the following:
// string[] result = {"test", "test2", "test3", "test4"}
var JsonProviderUrl = "../CategorySearch";

// Bind the input to the typeahead extension
$TypeaheadInput.typeahead({
    source: function (typeahead, query) {
        return $.post(JsonProviderUrl, { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});