javascript - BootstrapのTypeaheadにラベル、値、画像を追加する

Question

Typeaheadで遊んでいて、検索クエリに画像とラベルを表示する方法があるかどうかを調べようとしていますか？ツイートでユーザーに言及しようとしたときのTwitterの動作のようなものです。

Answer 1

調査を行い、ほとんどすべての髪の毛を抜いた後、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に画像、フルネーム、ユーザー名を簡単に追加できます。

Answer 2

蛍光ペンはもう機能していません。

テンプレートを使用します。例：

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

Answer 3

デフォルトのゴミブートストラップをカスタマイズする代わりに、http：//ivaynberg.github.com/select2/を使用する方が簡単/優れていると思われます。

そのページでテンプレートを検索すると、次のように表示されます。

Answer 4

次のカスタマイズされたコードを使用して、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;
    }
});

Answer 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': '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();
    }
};

出典：https ：//jsfiddle.net/geghamk/59eranrc/3/