Javascript 在Bootstrap'中添加标签、值和图片；前面有打字机吗

我正在玩游戏，我正在尝试找出是否有一种方法可以在搜索查询中显示图片和标签？就像我们在推特上提到用户时推特所做的那样。

你可能会发现使用推特比定制默认垃圾引导模式更容易/更好

如果您在该页面上搜索模板，您将找到它-它如下所示：

---

在做了一些研究并拔出了几乎所有的头发后，我终于想出了如何将全名、图像和用户名添加到像twitter这样的typeahead中

假设这是源中每个对象的以下结构

{{ 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;
            },

荧光灯：功能（项目）{
var parts=item.split（“#”），
html=''；
html+=''
html+=''；
html++'
'+parts[3]+'（@'+parts[1]+'）'+'
'；
html+=''；
html+=''；
返回html；
},

---

这将很容易在Typeahead中添加图片、全名和用户名。

您可以尝试使用以下自定义代码来呈现包含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;
    }
});

$（“.typeahead”）.typeahead({
来源：功能（查询、流程）{
//这里，我们将查询（搜索）和进程回调参数传递给节流函数
throttledRequest（查询、流程）；
},
荧光灯：功能（项目）{
var test=testObjs[项目]；
返回'+'+'
'+test.name+''+''；
},
更新程序：函数（selectedName）{
//请注意，“selectedName”与提供的标记无关
//通过highlighter函数。它对应于名称数组
//我们从源函数发送的。
//将id值保存到隐藏字段中
$（“#testId”）.val（testObjs[selectedName].id）；
//返回要进入文本框的字符串（名称）
返回selectedName；
}
});

荧光灯不再工作

使用模板，例如：

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}
        }
    }
);

var my_friends=[
{姓名：“约翰”，图片：http://..."}
，{姓名：“梅尔”，图片：http://..."}
];
var friends=新猎犬({
datumTokenizer:Bloodhound.tokenizers.obj.whitespace（'name'），
queryTokenizer:猎犬，标记，空白，
当地人：我的朋友们
});
初始化（）；
$（'friend'u name'）。请提前键入(
{
提示：没错，
推荐理由：没错，
最小长度：1，
},
{
姓名：'朋友'，
displayKey:'名称'，
来源：friends.ttAdapter（），
模板：{
空：“未找到”，//可选
建议：函数（el）{return'+el.name}
}
}
);

来源：

typeahead.initialize（）；
var typeahead={
typeaheadInit:function（）{
var jsonData=[{
“id”：1，
“名称”：“帕拉亚诺夫博物馆”，
“image”：“img/1.png”
}, {
“id”：2，
“名字”：“帕拉亚诺夫的电影”，
“image”：“img/2.png”
}, {
"id":3,，
“名字”：“帕拉亚诺夫是关于他的乔康达斯系列的”，
“image”：“img/3.png”
}, {
“id”：4，
“名字”：“帕拉亚诺夫关于石榴的颜色”，
“image”：“img/4.png”
}, {
“id”：5，
“姓名”：“乔治·迈克尔”，
“image”：“img/5.png”
}];
var PRODUCTNAME=[]；
$.each（jsonData、函数（索引、产品）{
PRODUCTNAME.push（product.name+“#”+product.image+“#”+product.id）；
});
$（'#typeahead'）。typeahead({
来源：productNames，
荧光灯：功能（项目）{
var parts=item.split（“#”），
html=''；
html+=''；
html+=''；
html+='
'+部分[0]+'
'；
html+=''；
html+=''；
var query=this.query；
var reEscQuery=query.replace（/[\-\[\]\/\{\}（\）\*\+\？\.\\\\^\$\\\\\\；]/g，“\\$&”）；
var reQuery=new RegExp（“（“+REECQUERY+”）”，“gi”）；
var jElem=$（html）；
var textNodes=$（jElem.find（'*'））.add（jElem.contents（）.filter（function（））{
返回this.nodeType==3；
});
textNodes.replaceWith（函数（）{
返回$（this）.text（）.replace（重新查询，$1）；
});
返回jElem.html（）；
},
更新程序：函数（selectedName）{
var name=selectedName.split（“#”）[0]；
返回名称；
}
});
},
初始化：函数（）{
var_this=这个；
_this.typeaheadInit（）；
}
};

---

来源：

我还可以使用自定义匹配器和更新器功能吗？实际上，我正试图在一个文本区域中实现@TriggeredTypeahead，比如Twitter。它有自己的功能，但我怀疑语法会足够相似。如果您通过ajax导入内容，Select2可以作为一个预先输入而不是一个选择框。老实说，我很快就放弃了bootstrap，因为我想在20-30000个条目上输入，所以需要在服务器上而不是客户端上进行过滤。哈哈，好的。我终于想出了如何为Bootstrap的Typeahead添加额外的内容。所以我想我会坚持下去，很酷，很高兴你把它整理好了。诚实的问题，你为什么说它是垃圾<代码>“…默认垃圾引导…”我想你错过了一个结束部分。但除此之外，效果很好

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