Javascript twitter引导类型预发（未定义的方法'；toLowerCase'）

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

因为twitter引导程序typeahead不支持ajax调用，所以我使用这个fork：

在那一页中，有一段提到了如何做我想做的事情。问题是，当我运行代码时，我不断得到：

未捕获的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在

有人知道我为什么老是遇到这个问题吗

---

谢谢

更新/修订查看问题：您提到的“无法调用undefined的'toLowerCase'方法”的错误发生在我使用bootstrap中不支持AJAX的原始Typeahead扩展时。（正如您所发现的）您确定没有加载原始的typeahead扩展，而不是您的修订版扩展吗

我一直很成功，这与你提到的略有不同。一旦我切换到这个要点并确认输入数据是好的（测试输入是JS对象中的字符串数组），问题就消失了

希望这有帮助

---

原始答复：

出现错误的原因是，传入typeahead matcher函数的值未定义。这只是在输入和该matcher函数之间发生的实际问题的一个副作用。我怀疑“制造商”数组有问题。请先测试它以验证是否有有效数组

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

下面是我用来将输入绑定到typeahead的方法。我确认它与您修改的typeahead fork一起工作

我的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>

---

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

property: 'name',

到

---

在我的例子中，我得到了这个确切的错误，结果证明我使用的Bootstrap版本（2.0.4）不支持将函数传递到

源设置

升级到Bootstrap 2.1.1修复了该问题。
键入一个字符串列表作为源

$（“#制造商”）。请提前键入({
资料来源：[“第1项”、“第2项”、“第3项”、“第4项”]
})


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

这应该是有效的：

$（“#制造商”）。请提前键入({
来源：函数（提前输入，查询）{
$.ajax({
url:window.location.origin+“/bows/get_manufacturers.json”，
类型：“POST”，
数据：“，
数据类型：“JSON”，
async:false，
成功：功能（结果）{
var制造商=新阵列；
$.map（results.data.manufacturers，function）（数据）{
var组；
组={
制造商id:data.manufacturer.id，
制造商：data.manufacturer.manufacturer，
toString:函数（）{
返回JSON.stringify（this）；
},
toLowerCase:函数（）{
返回此.manufacturer.toLowerCase（）；
},
indexOf:函数（字符串）{
返回String.prototype.indexOf.apply（this.manufacturer，arguments）；
},
替换：函数（字符串）{
返回String.prototype.replace.apply（this.manufacturer，arguments）；
}
};
制造商.推动（集团）；
});
提前打印。过程（制造商）；
}
});
},
属性：'制造商'，
项目：11，
onselect：功能（obj）{
var obj=JSON.parse（obj）；
//您仍然可以在此处使用制造商id
控制台日志（对象制造商id）；
返回对象制造商；
}
});
我不久前偶然发现了这个问题。我建议您重新检查包含
typeahead
库的配置（通过main.js、app.js或config.js）

否则，您可以将覆盖到应用程序库。
是否尝试使用下面的示例中的映射变量，当对象中有多个属性时，您需要使用此属性

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);
    }

请尝试以下代码：

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]);
}

String.prototype.hashCode=function（）{
var散列=0；
如果（this.length==0）返回哈希；
对于（i=0；ihash=（（hash在我的例子中，我的源数组中有空值导致了这个错误

人为的例子：

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

我只将bootstrap3-typeahead.min.js文件更新为中的文件，就解决了这个问题

我认为大多数人都可以用这种方法解决问题。
您是否尝试过使用Firebug或IE的F12开发工具调试JavaScript代码，以找到它试图调用
toLowerCase（）的确切位置
？@Cory使用Google Chrome Inspect工具，我发现错误出现在twitter引导代码第1664行，相当于Chrome Developer tools中@mmoscosa的第124行。许多javascript错误都有一个下拉列表，里面有其他错误，其中一个错误就是代码中出现错误的那一行。错误与so相关方法在引导中，但实际出现错误的地方是在您自己的代码中。
new Array
是有效的缩写。如果您不提供参数，JavaScript不需要括号
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]);
}

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