twitter bootstrap typeahead（未定义的方法'toLowerCase'） [英] twitter bootstrap typeahead (method 'toLowerCase' of undefined)

问题描述

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

I am trying to use twitter bootstrap to get the manufacturers from my DB.

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

Because twitter bootstrap typeahead does not support ajax calls I am using this fork:

https://gist.github.com/1866577

在该页面中有评论，提到如何做我想做的事情。问题是当我运行我的代码时，我继续得到：

In that page there is this comment that mentions how to do exactly what I want to do. The problem is when I run my code I keep on getting:

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

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

我用Google搜索并尝试将我的jquery文件更改为使用缩小版和非缩小版以及托管在Google代码上的文件，我不断获取同样的错误。

I googled around and came tried changing my jquery file to both using the minified and non minified as well as the one hosted on google code and I kept getting the same error.

我的代码目前如下：

$('#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

window.location.origin

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

to avoid any problems as already discussed on another question

在我使用 $。each（）之前，我决定使用 $。map（） 推荐Tomislav Markovski在类似问题

Also before I was using $.each() and then decided to use $.map() as recomended Tomislav Markovski in a similar question

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

Anyone has any idea why I keep getting this problem?!

谢谢

推荐答案

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

Typeahead expect a list of string as source

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

---

在您的情况下，您希望将其与对象列表一起使用。这样你就必须做一些改变才能使它有效

---

In your case you want to use it with a list of objects. This way you'll have to make some changes to make it works

这应该有效：

$('#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;
    }
});

这篇关于twitter bootstrap typeahead（未定义的方法'toLowerCase'）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！