我正在玩Typeahead，我想弄清楚是否有办法在搜索查询中显示图片和标签？就像我们尝试在推文上提及用户时 Twitter 的做法一样。
问问题
17890 次
5 回答
15
在做了一些研究并把我几乎所有的头发都拉出来之后，我终于想出了如何将全名、图像和用户名添加到像 twitter 这样的预输入中。
可以说这是您的源的每个对象的以下结构，
{{ friend.id }}#{{ friend.username }}#{{ friend.imgurl }}#{{ friend.fullname }}
然后你所要做的就是写一个漂亮的荧光笔，像这样
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;
},
这将在 Typeahead 中轻松添加图片、全名和用户名。
于 2013-01-05T12:48:55.143 回答
8
荧光笔不再工作了。
使用模板，例如：
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}
}
}
);
来源：https ://gist.github.com/jharding/9458780#file-custom-templates-js
于 2014-07-11T19:25:13.917 回答
7
于 2013-01-04T17:11:04.323 回答
5
您可以尝试使用以下自定义代码来呈现包含 JSON 模式的图像。
请按照此处的小提琴链接进行实施和测试。
预输入看起来像：
$(".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;
}
});
于 2013-04-25T11:50:20.307 回答
4
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>$1</strong>');
});
return jElem.html();
},
updater: function(selectedName) {
var name = selectedName.split('#')[0];
return name;
}
});
},
initialize: function() {
var _this = this;
_this.typeaheadInit();
}
};
于 2016-02-25T10:43:14.083 回答