jQuery UI 自动完成 v1.8.14 多词搜索 +突出显示
我正在尝试使用 jQuery UI Autocomplete v1.8.14 实现两件事。
1) 对所有匹配项使用空格分隔的单词搜索(与顺序无关): (例如搜索“some heart”,匹配“赢得某人的心”)
2) 突出显示所有匹配项: (例如搜索“some heart”,匹配“赢得some one的heart”)
此问题已被多次询问,但我一直无法找到显示正确实现的简单、可重现的代码。
我已经启动了 JS Fiddle:http://jsfiddle.net/KywMH/2/。如果可能,请以可重现代码的形式回答。
谢谢。
I'm trying to achieve two things using jQuery UI Autocomplete v1.8.14.
1) Use a space delimited word search for all matches (independent of order):
(eg search "some heart", matches "win the heart of someone")
2) Highlight all of the matches:
(eg search "some heart", matches "win the heart of some one")
This question has been asked multiple times, but I have been unable to find simple, reproducible code showing correct implementation.
I've started a JS Fiddle: http://jsfiddle.net/KywMH/2/. If possible please answer in the form of reproducible code.
Thank you.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这是一种方法:在 jsFiddle 上查看它的实际情况。
由于旧的高亮功能不再可用,我们使用
open
事件来突出显示搜索词。特别注意不要突出显示内部标签。Here's one way: See it in action at jsFiddle.
Because the old highlight function is no longer available, we use the
open
event to highlight the search terms. Pay special attention not to highlight inside tags.下面的解决方案通过
1) 修改自动完成源函数
2) 修改 .data('autocomplete')._renderItem
解决这两个问题可以在此处找到工作的 JS Fiddle: http://jsfiddle.net/W8MKt/7/
对代码或解决方案的任何批评将不胜感激。
谢谢。
The solution below solves these two problems by
1) Modifying the autocomplete source function
2) Modifying .data('autocomplete')._renderItem
A working JS Fiddle can be found here: http://jsfiddle.net/W8MKt/7/
Any critique of the code or the solution would be appreciated.
Thank you.
我发现使用内置的自动完成过滤器来减少搜索空间也能达到目的(而且更简单):
I've found that using the built in autocomplete filter to reduce your search space does the trick as well (and is much simpler):