使用 Bootstrap Typeahead 的荧光笔替代方案

Question

我目前正在使用来自

的bootstrap 3 typeahead 模块

https://github.com/bassjobsen/Bootstrap-3-Typeahead

当用户搜索时，有时 returned 的建议实际上并不包含他们正在搜索的任何文本。

例如，用户可能正在搜索 Athletic Clothing，而我的搜索建议算法可能 return Nike 到 TypeAhead。

一切都很好，除了我通过指定它应该用来显示数据的 highlighter 函数来覆盖 TypeAhead 显示。

似乎只有当用户搜索文本出现在建议项中时才会调用荧光笔功能。所以在这种情况下，我的 Nike 搜索建议没有被 highlighter 函数显示。

有没有办法在每个预先输入的元素上强制使用荧光笔功能？即使是那些不包含用户查询的。

这是我的荧光笔功能：

highlighter: function(data){
                var itm = ''
                         + "<div class='typeahead_wrapper'>"
                         + "<a href='/users.php?user="+data+"'><img width='30' class='typeahead_photo' src='/profiles/" + data + ".jpg' /></a>"
                         + "<div class='typeahead_labels'>"
                         + "<div class='typeahead_primary'><a href='/users.php?user="+data+"'>" + data + "</a></div>"
                         + "</div>"
                         + "</div>";
                return itm;
            }

Answer 1

我最终使用了一个非常糟糕的方法来解决这个问题。

我将返回到 typeahead 的数据修改为

格式

value**matched text

然后在荧光笔函数的顶部我简单地调用了 split 以在输出之前从中提取值。

使用 Bootstrap Typeahead 的荧光笔替代方案

Highlighter Alternative Using Bootstrap Typeahead

javascript

jquery

typeahead

twitter-bootstrap