Я играю с Typeahead, и я пытаюсь выяснить, есть ли способ отображения изображений и ярлыков в поисковом запросе? Что-то вроде того, как работает Twitter, когда мы пытаемся упомянуть пользователей о твитах.
Добавление метки, значения и изображения в Bootstrap Typeahead
Ответ 1
После некоторых исследований и вытаскивания почти всех моих волос, я наконец выяснил, как добавить Fullname, изображение и имя пользователя к типу, как твиттер.
Предположим, что это следующая структура каждого объекта для вашего источника,
{{ 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.
Ответ 2
Скорее всего, вам будет проще/лучше использовать http://ivaynberg.github.com/select2/ вместо того, чтобы пытаться настроить загрузочный бутстрап по умолчанию!
Если вы ищете Templating на этой странице, вы найдете его - это выглядит так:
Ответ 3
highlighter больше не работает.
Используйте шаблоны, например:
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
Ответ 4
Вы можете использовать следующий настраиваемый код для рендеринга изображений, содержащих схему JSON.
Ответ 5
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': Parajanov’s about his series of Giocondas',
'image': 'img/3.png'
}, {
'id': 4,
'name': 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();
}
};
Источник: https://jsfiddle.net/geghamk/59eranrc/3/