JavaScript – 在Bootstrap的Typeahead中添加标签,值和图片

我正在玩 Typeahead,我想知道是否有办法在搜索查询中显示图片和标签？当我们尝试在Twitter上提及用户时,Twitter的功能就像Twitter一样.

解决方法

在做了一些研究和拉拔几乎所有的头发后,我终于弄清楚如何添加全名,图像和用户名到类似于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;
            },

这样可以轻松地添加图片,全名和用户名.