如何使用jquery ui自动完成function使匹配的文本变为粗体？

我想知道如何在使用jquery ui自动完成时使自动完成建议的匹配部分变为粗体？

因此，例如，如果您键入“ja”并且建议是javascript和java（就像在jquery ui演示页面上的示例中那样），那么我想在两个建议中使“ja”变为粗体。

谁知道怎么做？

非常感谢您的帮助…

Answer 1

我不确定为什么自动完成与其包含的其他function相比是如此简单（例如可放置，可排序，可拖动等）。

它应该为您提供一个可设置的选项，例如用term或类似的东西包装它。

你可以这样做

它应该是不言自明的; 如果没有，请大声喊叫。

Answer 2

在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"), '$1')); }); } 

Answer 3

如果您使用的是jquery-ui.js ：

 acData = $(this).data('autocomplete');// will not work //instead use acData = $(this).data('uiAutocomplete'); 

Answer 4

对于那些想要搜索不区分大小写的人来说，这是一个解决方案（只有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); }) ); }); } 

Answer 5

在jQuery UI 1.9.x中，这个解决方案对我来说不起作用，因为acData未定义 – 数据引用时间错误，因为我在文档准备好之前初始化了我的PluginHelper。

我使用jQuery UIs小部件工厂来修改_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, '$1'); return $('
' + label + '
').appendTo(ul); } }); 

您现在可以使用它：

 $('input.jsAutocompleteHighlight').autocompleteHighlight({ highlightClass: 'ui-autocomplete-highlight' }); 

CSS样式：

 .ui-autocomplete-highlight { font-weight: bold; }