twitter-bootstrap 在 Bootstrap 的 Typeahead 中添加标签、值和图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14150216/
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
Adding Label, value and picture in Bootstrap's Typeahead
提问by Jonathan
回答by Jonathan
After doing some research and pulling almost all my hair out, I finally figured out how to add Fullname, image and username to a typeahead like twitter.
在做了一些研究并把我几乎所有的头发都拉出来之后，我终于想出了如何将全名、图像和用户名添加到像 twitter 这样的预先输入中。
Lets say this is the following structure of each object for your source,
假设这是您的源的每个对象的以下结构，
{{ friend.id }}#{{ friend.username }}#{{ friend.imgurl }}#{{ friend.fullname }}
Then all you have to do is write a nice Highlighter, something like this
然后你所要做的就是写一个漂亮的荧光笔，像这样
highlighter: function(item) {
var parts = item.split('#'),
html = '<div class="typeahead">';
html += '<div class="media"><a class="pull-left" href="#"><img src='+parts[2]+' /></a>'
html += '<div class="media-body">';
html += '<p class="media-heading">'+parts[3]+' (@'+parts[1]+')'+'</p>';
html += '</div>';
html += '</div>';
return html;
},
This will easily add the Picture, Full name and Username in Typeahead.
这将很容易在 Typeahead 中添加图片、全名和用户名。
回答by Rich Bradshaw
You will likely find it easier/better to use http://ivaynberg.github.com/select2/instead of trying to customise the default rubbish Bootstrap one!
您可能会发现使用http://ivaynberg.github.com/select2/而不是尝试自定义默认的垃圾引导程序更容易/更好！
If you search for Templating on that page, you'll find it - it looks like this:
如果您在该页面上搜索模板，您会找到它 - 它看起来像这样：
回答by ebob
highlighter is not working anymore.
荧光笔不再起作用。
Use templates, example:
使用模板，例如：
var my_friends = [
{name: "John", picture: "http://..."}
,{name: "Mel", picture: "http://..."}
];
var friends = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: my_friends
});
friends.initialize();
$('#friend_name').typeahead(
{
hint: true,
highlight: true,
minLength: 1,
},
{
name: 'friends',
displayKey: 'name',
source: friends.ttAdapter(),
templates: {
empty: 'not found', //optional
suggestion: function(el){return '<img src="'+el.picture+'" />'+el.name}
}
}
);
Source: https://gist.github.com/jharding/9458780#file-custom-templates-js
来源：https: //gist.github.com/jharding/9458780#file-custom-templates-js
回答by Shobhit Sharma
You can try to use the following customized code for rendering images containing with the JSON schema.
您可以尝试使用以下自定义代码来渲染包含 JSON 架构的图像。
Please follow the fiddle link herefor implementation and testing.
The typeahead looks like:
typeahead 看起来像：
$(".typeahead").typeahead({
source: function (query, process) {
//here we pass the query (search) and process callback arguments to the throttled function
throttledRequest(query, process);
},
highlighter: function (item) {
var test = testObjs[item];
return '<div class="test">' + '<img src="' + test.photo + '" />' + '<br/><strong>' + test.name + '</strong>' + '</div>';
},
updater: function (selectedName) {
//note that the "selectedName" has nothing to do with the markup provided
//by the highlighter function. It corresponds to the array of names
//that we sent from the source function.
//save the id value into the hidden field
$("#testId").val(testObjs[selectedName].id);
//return the string you want to go into the textbox (the name)
return selectedName;
}
});
回答by Gegham Khachatryan
typeahead.initialize();
var typeahead = {
typeaheadInit: function() {
var jsonData = [{
'id': 1,
'name': 'Parajanov Museum',
'image': 'img/1.png'
}, {
'id': 2,
'name': 'Parajanov's Movie',
'image': 'img/2.png'
}, {
'id': 3,
'name': 'S Parajanov's about his series of Giocondas',
'image': 'img/3.png'
}, {
'id': 4,
'name': 'S Parajanov's about the colore of pomegranate',
'image': 'img/4.png'
}, {
'id': 5,
'name': 'George Michael',
'image': 'img/5.png'
}];
var productNames = [];
$.each(jsonData, function(index, product) {
productNames.push(product.name + "#" + product.image + "#" + product.id);
});
$('#typeahead').typeahead({
source: productNames,
highlighter: function(item) {
var parts = item.split('#'),
html = '<div><div class="typeahead-inner" id="' + parts[2] + '">';
html += '<div class="item-img" style="background-image: url(' + parts[1] + ')"></div>';
html += '<div class="item-body">';
html += '<p class="item-heading">' + parts[0] + '</p>';
html += '</div>';
html += '</div></div>';
var query = this.query;
var reEscQuery = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\^$\|]/g, "\$&");
var reQuery = new RegExp('(' + reEscQuery + ')', "gi");
var jElem = $(html);
var textNodes = $(jElem.find('*')).add(jElem).contents().filter(function() {
return this.nodeType === 3;
});
textNodes.replaceWith(function() {
return $(this).text().replace(reQuery, '<strong></strong>');
});
return jElem.html();
},
updater: function(selectedName) {
var name = selectedName.split('#')[0];
return name;
}
});
},
initialize: function() {
var _this = this;
_this.typeaheadInit();
}
};
