在 Bootstrap 的 Typeahead 中添加标签、值和图片

问题描述

我正在玩 Typeahead 我想弄清楚是否有办法在搜索查询中也显示图片和标签?就像 Twitter 尝试在推文上提及用户时所做的那样.

解决方案

在做了一些研究并将我几乎所有的头发都拉出来之后，我终于想出了如何将全名、图像和用户名添加到像 twitter 这样的预先输入中.

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

{{friend.id }}#{{friend.username }}#{{friend.imgurl }}#{{friend.fullname }}

然后你所要做的就是写一个漂亮的荧光笔，像这样

highlighter: function(item) {var parts = item.split('#'),html = '
';html += '<div class="media"><a class="pull-left" href="#"><img src='+parts[2]+'/></一个>'html +='
';html += '<p class="media-heading">'+parts[3]+' (@'+parts[1]+')'+'</p>';html += '</div>';html += '</div>';返回html；},

这将在 Typeahead 中轻松添加图片、全名和用户名.

I am playing around with Typeahead and I am trying to figure out if there is a way to display Pictures and Labels in the search query as well? Something like how Twitter does when we try to mention users on Tweets.

解决方案

After doing some research and pulling almost all my hair out, I finally figured out how to add Fullname, image and username to a typeahead like twitter.

Lets say this is the following structure of each object for your source,

{{ friend.id }}#{{ friend.username }}#{{ friend.imgurl }}#{{ friend.fullname }}

Then all you have to do is write a nice Highlighter, something like this

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

This will easily add the Picture, Full name and Username in Typeahead.

这篇关于在 Bootstrap 的 Typeahead 中添加标签、值和图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！