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

Question

我目前使用的是 bootstrap 3 typeahead 模块

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

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

例如，用户可能正在搜索 Athletic Clothing，我的搜索建议算法可能会将 Nike 返回给 TypeAhead。

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

看来只有当用户搜索文本出现在建议项中时才会调用荧光笔功能。因此，在这种情况下，highlighter 功能不会显示我的 Nike 搜索建议。

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

这是我的荧光笔功能:

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

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

我修改了返回到预输入的数据的格式

value**matched text

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