Javascript twitter bootstrap typeahead（未定义的方法“toLowerCase”）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11235644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap typeahead (method 'toLowerCase' of undefined)
提问by mmoscosa
I am trying to use twitter bootstrap to get the manufacturers from my DB.
我正在尝试使用 twitter bootstrap 从我的数据库中获取制造商。
Because twitter bootstrap typeahead does not support ajax calls I am using this fork:
因为 twitter bootstrap typeahead 不支持 ajax 调用，所以我正在使用这个 fork：
https://gist.github.com/1866577
https://gist.github.com/1866577
In that page there is this commentthat mentions how to do exactly what I want to do. The problem is when I run my code I keep on getting:
在该页面中，有一条评论提到了如何做我想做的事情。问题是当我运行我的代码时，我不断得到：
Uncaught TypeError: Cannot call method 'toLowerCase' of undefined
未捕获的类型错误：无法调用未定义的方法“toLowerCase”
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.
我用谷歌搜索并尝试将我的 jquery 文件更改为使用缩小和非缩小以及托管在谷歌代码上的文件，但我一直收到相同的错误。
My code currently is as follows:
我的代码目前如下：
$('#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) {
}
});
on the url field I added the
在 url 字段上，我添加了
window.location.origin
窗口.位置.原点
to avoid any problems as already discussed on another question
避免已经在另一个问题上讨论过的任何问题
Also before I was using $.each()and then decided to use $.map()as recomended Tomislav Markovski in a similar question
同样在我使用$.each()然后决定$.map()在类似问题中使用推荐的 Tomislav Markovski 之前
Anyone has any idea why I keep getting this problem?!
任何人都知道为什么我一直遇到这个问题？！
Thank you
谢谢
回答by ThomasDurin
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
在您的情况下，您希望将它与对象列表一起使用。这样您就必须进行一些更改才能使其正常工作
This should 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;
}
});
回答by Matthew Schinckel
In my case, I was getting this exact error, and it turned out that the version of Bootstrap I was using (2.0.4) did not support passing in a function to the sourcesetting.
就我而言，我得到了这个确切的错误，结果我使用的 Bootstrap 版本 (2.0.4) 不支持将函数传递给source设置。
Upgrading to Bootstrap 2.1.1 fixed the problem.
升级到 Bootstrap 2.1.1 解决了这个问题。
回答by Dan Sorensen
UPDATED / REVISED LOOK AT THE ISSUE:The error you mentioned "Cannot call method 'toLowerCase' of undefined" occurred to me when I used the original Typeahead extension in bootstrap that does not support AJAX. (as you have found) Are you sure that the original typeahead extension isn't loading, instead of your revised one?
更新/修订查看问题：当我在不支持 AJAX 的引导程序中使用原始 Typeahead 扩展时，我发生了您提到的错误“无法调用未定义的方法 'toLowerCase'”。（如您所见）您确定未加载原始输入扩展名，而不是您修改后的扩展名吗？
I have been sucessfully using this Gist of typeaheadthat is a slight variation on the one you mention. Once I switched to that Gist and confirmed that the input data was good (testing that the input was a string array in an JS object, the issue went away.
我已经成功地使用了这个提前输入的要点，它与你提到的那个略有不同。一旦我切换到那个 Gist 并确认输入数据是好的（测试输入是 JS 对象中的字符串数组，问题就消失了。
Hope this helps
希望这可以帮助
Original answer:
原答案：
The reason the error occurs is because the value passed into the typeahead matcher function is undefined. That is just a side effect to the real issue which occurs somewhere between your input and that matcher function. I suspect the 'manufacturers' array has a problem. Test it first to verify you have a valid array.
发生错误的原因是传递给 typeahead 匹配器函数的值未定义。这只是在您的输入和匹配器函数之间发生的真正问题的副作用。我怀疑“制造商”阵列有问题。首先测试它以验证您有一个有效的数组。
// It appears your array constructor is missing ()
// try the following in your binding code:
var manufacturers = new Array();
Here is what I am using to bind the input to typeahead. I confirmed that it works with your modified typeahead fork.
这是我用来将输入绑定到预先输入的内容。我确认它适用于您修改后的 typeahead fork。
My HTML:
我的 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>
My binding JavaScript code:
我的绑定 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);
});
}
});
回答by rrrhys
In my case I had null values in my source array causing this error.
在我的情况下，我的源数组中有空值导致此错误。
Contrived example:
人为的例子：
source : ["item 1", "item 2", null, "item 4"]
回答by Sgedda
Have you tried using mapping variables like example below, you need to use this when you got more then one property in your object;
您是否尝试过使用如下示例那样的映射变量，当您的对象中有多个属性时需要使用它；
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);
}
回答by grudolf
Your manufacturer objects don't have a "name" property, you should change
您的制造商对象没有“名称”属性，您应该更改
property: 'name',
to
到
property: 'manufacturer',
回答by Shobhit Sharma
I stumbled upon this issue a while ago. I advice you to recheck configuration where you are including typeaheadlibraries (via main.js, app.js or config.js).
不久前我偶然发现了这个问题。我建议您重新检查包含typeahead库的配置（通过 main.js、app.js 或 config.js）。
Otherwise, you can overwrite the latest Bootstrap versionto your application library.
否则，您可以将最新的 Bootstrap 版本覆盖到您的应用程序库中。
回答by luchopintado
Try this code:
试试这个代码：
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]);
}
});
});
回答by Luiz Alberto Barbosa Mesquita
I solved this problem only updating the file bootstrap3-typeahead.min.js to the file in https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.min.js
我解决了这个问题，只将文件 bootstrap3-typeahead.min.js 更新到https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.min.js 中的文件
I think most people can solve this way.
我想大多数人都可以通过这种方式解决。
