我使用ui-bootstrap typeahead。它工作出色！但是，我想知道是否可能在结果列表中显示多个属性甚至HTML。典型问题：搜索返回多个具有相同值的对象。例如，搜索“惊人的恩典”返回[“惊人的恩典”，“惊人的恩典”]哪里是电影，一首是歌曲。我希望结果列表更像：
amazing grace | movie amazing grace | song
…所以用户知道他们正在选择什么。更好的是标题旁边的图标。换句话说，列表中的每个结果都包含一些HTML。这些都可以开箱即用吗？
关于
http://angular-ui.github.io/bootstrap/的typahead指令的事情是试图模仿来自AngularJS的
select directive使用的语法。这意味着用于选择要绑定的模型和标签的所有表达式均为
AngularJS expressions.这反过来意味着您可以使用任何AngularJS表达式来计算标签的文本。
例如，要显示您想要的文本，您可以写：
typeahead="item as item.title + ' (' + item.type + ')' for item in titles | filter:{title:$viewValue}"
如果您的数据模型如下所示：
$scope.titles = [
{title: 'Amazing Grace',type: 'movie'},{title: 'Amazing Grace',type: 'song'}
];
在这里工作的朋友：
http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview
在类型头部属性中为标签编写复杂表达式可能会变得丑陋，但没有任何阻止您将标签计算逻辑移动到范围上公开的函数，例如：
typeahead="item as label(item) for item in titles | filter:{title:$viewValue}"
$scope.label = function(item) {
return item.title + ' (' + item.type + ')';
};
另一个朋友：http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=preview
就您关于图标的问题而言，您可以在标签表达式中嵌入HTML，但是写入和维护变得非常糟糕。幸运的是，typeahead指令允许您为匹配的项目提供自定义模板，如下所示：
typeahead-template-url="itemTpl.html"
在自定义模板中，您可以使用任何您想要的表达式或AngularJS指令。通过ngClass指令的一点帮助，添加图标变得微不足道：
<script type="text/ng-template" id="itemTpl.html">
<a tabindex="-1">
<i ng-class="'icon-'+match.model.type"></i>
<span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
</a>
</script>
和工作的朋友：http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=preview
很整洁的小指令，不是吗？
