如何使用 jquery ui 自动完成使匹配的文本加粗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3344804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make matched text bold with jquery ui autocomplete?
提问by apolka
I am wondering how to make the matched part of the autocomplete suggestions bold when using jquery ui autocomplete?
我想知道如何在使用 jquery ui 自动完成时使自动完成建议的匹配部分加粗？
So for example if you type in "ja" and the suggestions are javascript and java (like in the example on the jquery ui demo page) then I would like to make "ja" bold in both suggestions.
因此，例如，如果您输入“ja”并且建议是 javascript 和 java（如 jquery ui 演示页面上的示例），那么我想在这两个建议中都将“ja”设为粗体。
Anyone knows how to do that?
有谁知道怎么做？
Thanks a lot for the help...
非常感谢您的帮助...
回答by peol
I'm not sure why the autocomplete is so bare-bone compared to the other functionalities it contains (e.g. droppable, sortable, draggable etc.).
我不确定为什么自动完成与它包含的其他功能（例如可放置、可排序、可拖动等）相比如此简单。
It should really offer you with a stylable option, e.g. wrapping it with <span class="ui-autocomplete-term">term</span>or something similar.
它真的应该为您提供一个可样式化的选项，例如用<span class="ui-autocomplete-term">term</span>或类似的东西包裹它。
You could do it like this
你可以做到像这样
It should be pretty self-explanatory; if not, gimme a shout.
它应该是不言自明的；如果没有，请大声喊叫。
回答by Frederic
In jQuery UI 1.11.1, here is the code I used to make it work (case insensitive):
在 jQuery UI 1.11.1 中，这是我用来使其工作的代码（不区分大小写）：
open: function (e, ui) {
var acData = $(this).data('ui-autocomplete');
acData
.menu
.element
.find('li')
.each(function () {
var me = $(this);
var keywords = acData.term.split(' ').join('|');
me.text(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<b></b>'));
});
}
回答by SachinV
If you are using jquery-ui.js:
如果您正在使用jquery-ui.js：
acData = $(this).data('autocomplete');// will not work
//instead use
acData = $(this).data('uiAutocomplete');
回答by brechtvhb
Here's a solution for those who want to search case insensitive (only the open function is diffirent):
对于那些想要搜索不区分大小写的人（只有 open 函数不同），这是一个解决方案：
open: function(e,ui) {
var
acData = $(this).data('autocomplete');
acData
.menu
.element
.find('a')
.each(function() {
var me = $(this);
var regex = new RegExp(acData.term, "gi");
me.html( me.text().replace(regex, function (matched) {
return termTemplate.replace('%s', matched);
}) );
});
}
回答by redaxmedia
In jQuery UI 1.9.x this solution did not work for me because acData was undefined - the data reference timing was wrong because I init my PluginHelper before the document ready.
在 jQuery UI 1.9.x 中，这个解决方案对我不起作用，因为 acData 未定义 - 数据引用时间错误，因为我在文档准备好之前初始化了我的 PluginHelper。
I came up to mod the _renderItem using jQuery UIs widget factory:
我想出了使用 jQuery UI 小部件工厂修改 _renderItem 的方法：
$.widget("custom.autocompleteHighlight", $.ui.autocomplete, {
_renderItem: function (ul, item) {
var regexp = new RegExp('(' + this.term + ')', 'gi'),
classString = this.options.HighlightClass ? ' class="' + this.options.highlightClass + '"' : '',
label = item.label.replace(regexp, '<span' + classString + '></span>');
return $('<li><a href="#">' + label + '</a></li>').appendTo(ul);
}
});
You now can use it with:
您现在可以将其用于：
$('input.jsAutocompleteHighlight').autocompleteHighlight({
highlightClass: 'ui-autocomplete-highlight'
});
CSS styling:
CSS样式：
.ui-autocomplete-highlight {
font-weight: bold;
}
