Добавление метки, значения и изображения в 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/