Question

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

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

https://gist.github.com/1866577

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

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

我用Google搜索并尝试将我的jquery文件更改为使用缩小版和非缩小版以及Google代码上托管的版本，并且我一直收到同样的错误。

我的代码目前如下：

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

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

谢谢

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'未定义”的错误。（正如您所发现的）您确定原始的预先扩展名未加载，而不是您修改过的扩展名吗？

我成功using this Gist of typeahead，这与你提到的那个略有不同。一旦我切换到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);
        });
    }
});

Answer 4

在我的情况下，我的源数组中有空值导致此错误。

受挫的例子：

source : ["item 1", "item 2", null, "item 4"]

Answer 5

您的制造商对象没有“名称”属性，您应该更改

property: 'name',

到

property: 'manufacturer',

Answer 6

您是否尝试过使用下面示例中的映射变量，当您在对象中获得多个属性时，需要使用此变量;

source: function (query, process) {
        states = [];
        map = {};

        var data = [
            {"stateCode": "CA", "stateName": "California"},
            {"stateCode": "AZ", "stateName": "Arizona"},
            {"stateCode": "NY", "stateName": "New York"},
            {"stateCode": "NV", "stateName": "Nevada"},
            {"stateCode": "OH", "stateName": "Ohio"}
        ];

        $.each(data, function (i, state) {
            map[state.stateName] = state;
            states.push(state.stateName);
        });

        process(states);
    }

Answer 7

我不久前偶然发现了这个问题。我建议你重新检查配置typeahead库的配置（通过main.js，app.js或config.js）。

否则，您可以覆盖应用程序库的latest Bootstrap version。

Answer 8

试试这段代码：

String.prototype.hashCode = function(){
var hash = 0;
if (this.length == 0) return hash;
for (i = 0; i < this.length; i++) {
    char = this.charCodeAt(i);
    hash = ((hash<<5)-hash)+char;
    hash = hash & hash; // Convert to 32bit integer
}
return hash;
};

var map_manufacter, result_manufacters;
$('#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){

            result_manufacter = [], map_manufacters = {};
            $.each(results.data.manufacturers, function(item, data){                    
                map_manufacters[data.Manufacturer.manufacturer.hashCode()] = data;
                result_manufacters.push(data.Manufacter.manufacter);
            });             
            typeahead.process(result_manufacters);                
        }
    });
},
property: 'name',
items:11,
onselect: function (obj) {
    var hc = obj.hashCode();
    console.log(map_manufacter[hc]);
}

}）;

Answer 9

我解决了这个问题，只将文件bootstrap3-typeahead.min.js更新为https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.min.js

中的文件

我认为大多数人都可以这样解决。

twitter bootstrap typeahead（未定义的方法'toLowerCase'）

9 个答案: