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

前端之家收集整理的这篇文章主要介绍了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;
            },

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

猜你在找的JavaScript相关文章