jQuery 使用 Twitter Bootstrap Typeahead 处理对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16105801/
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
Handling objects with Twitter Bootstrap Typeahead
提问by Cameron
I'm using the Bootstrap Typeahead plugin like so:
我正在使用 Bootstrap Typeahead 插件，如下所示：
$('#Organisation').typeahead({
source: function (query, process) {
return $.get(AppURL + 'Organisations/Manage/SearchByName/',
{
term: query
},
function (data) {
var results = [];
var fullResults = [];
$.each(data, function (index, item) {
results.push(item.label);
fullResults.push({
id: item.ID,
label: item.label
});
});
return process(results);
});
},
updater: function (selection) {
$('#OrganisationID').val(selection);
}
});
I have two returned arrays, this is because Typeahead ONLY wants a list of strings instead of an object. The second array contains both the label and id.
我有两个返回的数组，这是因为 Typeahead 只想要一个字符串列表而不是一个对象。第二个数组包含标签和 id。
Once a user selects an item from the list I need to get the ID from this selection and then use it to insert into a hidden field. But the selection will just be the name, as the ID can't be passed through via Typeahead.
一旦用户从列表中选择了一个项目，我需要从这个选择中获取 ID，然后用它插入一个隐藏的字段。但选择将只是名称，因为 ID 不能通过 Typeahead 传递。
Any ideas on how I can solve this?
关于如何解决这个问题的任何想法？
An example of the two returned arrays:
两个返回数组的示例：
results: ["Organisation 1","Organisation 2"]
结果： ["Organisation 1","Organisation 2"]
fullResults: [{"label":"Organisation 1","ID":2},{"label":"Organisation 2","ID":1}]
完整结果： [{"label":"Organisation 1","ID":2},{"label":"Organisation 2","ID":1}]
回答by fredrik
After searching around a bit on the net I found thisHowTo. In it they do what you want, but with no ajax.
在网上搜索了一下之后，我找到了这个HowTo。在其中他们做你想做的事，但没有ajax。
You should also be able to return a object, from the source function, but you would need to re-implement all the helper functions of typeahead.
您还应该能够从源函数返回一个对象，但您需要重新实现 typeahead 的所有辅助函数。
回答by quazardous
I have an ugly solution...
我有一个丑陋的解决方案......
I needed to be able to search into the title but to finally put the ID into the text input...
我需要能够搜索标题，但最终将 ID 放入文本输入中...
my JSON is
我的 JSON 是
[
{"id": 1, "title": "Foo foo foo"},
{"id": 2, "title": "Bar bar bar"},
...
]
and my call...
还有我的电话...
$(function() {
$.get("path/to/data.json", function(data){
$(".typeahead").typeahead({
"source": data,
"displayText": function(item){
// OMG ugly !!! :p
if (item.id == undefined) return item;
return item.title + ' (' + item.id + ')';
},
"updater": function(item) {
return item.id;
}});
}, 'json');
});
All is working as usual but when you click on the selected item, only the id is put into the field...
一切正常，但是当您单击所选项目时，只有 id 被放入该字段...
done ! ugly but done...
完毕 ！丑陋但完成...
Tested with https://github.com/bassjobsen/Bootstrap-3-Typeahead
回答by pickypg
You cannot normally use JSON objectsdirectly within Bootstrap Typeahead (2.x), but you can easily tweak it to do so. The wording of this question should help for people to find this in one place. Other questionshave asked similar things, but not identical to the way that you did.
您通常不能直接在 Bootstrap Typeahead (2.x) 中使用 JSON 对象，但您可以轻松地调整它来这样做。这个问题的措辞应该有助于人们在一个地方找到它。其他问题提出了类似的问题，但与您提出的方式不同。
var typeahead = control.typeahead({ /* ... */ }).data('typeahead');
// manually override select and render
// (change attr('data-value' ...) to data('value' ...))
// otherwise both functions are exact copies
typeahead.select = function() {
var val = this.$menu.find('.active').data('value')
this.$element.val(this.updater(val)).change()
return this.hide()
};
typeahead.render = function(items) {
var that = this
items = $(items).map(function (i, item) {
i = $(that.options.item).data('value', item)
i.find('a').html(that.highlighter(item))
return i[0]
});
items.first().addClass('active')
this.$menu.html(items)
return this
};
Other than that, you must override highlighter, matcher, sorter, and updater, but those can done via the options passed into the typeahead, where the passed in item(s) are now your JSON objects.
除此之外，您必须覆盖highlighter, matcher, sorter, 和updater，但这些可以通过传递到 typeahead 的选项来完成，其中传入的item(s) 现在是您的 JSON 对象。
When selecting items, updateris called, which is how you set the value anduse the JSON data:
选择items, 时updater调用，这是您设置值和使用 JSON 数据的方式：
updater: function (item) {
someGlobalValue = item.id;
// must return a normal string; sets the textbox value
return item.name;
}
This also means that you don't need to do anything fancy to associate, or otherwise "remember" the items external to Typeahead referenced example in the other answer. The most annoying part of the whole overriding process is rewriting the sorterin every use.
这也意味着您不需要做任何花哨的事情来关联，或者“记住”另一个答案中 Typeahead 引用示例之外的项目。整个覆盖过程中最烦人的部分是sorter在每次使用中重写。
回答by Anton Shchastnyi
Consider rewriting "matcher", "sorter", "updater" and "highlighter" functions just like it was described at https://stackoverflow.com/a/14959406/593415
考虑重写“matcher”、“sorter”、“updater”和“highlighter”函数，就像在https://stackoverflow.com/a/14959406/593415中描述的那样
This really does a trick so that you could manipulate objects with Bootstrap Typeahead (2.x)
这确实有一个技巧，因此您可以使用 Bootstrap Typeahead (2.x) 操作对象
