如何使用jquery ui自动完成使匹配的文本加粗？

我想知道在使用jquery ui autocomplete时，如何将自动完成建议的匹配部分加粗

例如，如果您键入“ja”，并且建议是javascript和java（如jqueryui演示页面上的示例），那么我希望在这两个建议中都将“ja”加粗

有人知道怎么做吗

---

非常感谢您的帮助……

我不知道为什么自动完成与它包含的其他功能（例如可拖放、可排序、可拖动等）相比如此简单

它应该为您提供一个可设置样式的选项，例如，用

术语

或类似的东西包装它

你可以这样做

---

它应该是相当不言自明的；如果没有，请告诉我。

对于那些希望搜索不区分大小写（只有open函数是diffirent）的人，这里有一个解决方案：

如果您正在使用：

---

在jQueryUI1.9.x中，这个解决方案对我不起作用，因为acData未定义-数据引用计时错误，因为我在文档准备好之前初始化了我的PluginHelper

我使用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 + '>$1</span>');

        return $('<li><a href="#">' + label + '</a></li>').appendTo(ul);
    }
});

CSS样式：

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

---

在jQuery UI 1.11.1中，以下是我用来使其工作的代码（不区分大小写）：

open：功能（e、ui）{
var acData=$（this）.data（'ui-autocomplete'）；
acData
.菜单
.元素
.find（'li'））
.每个（功能）{
var me=$（此）；
var关键字=acData.term.split（“”）.join（“|”）；
text（me.text（）.replace（新的RegExp（“（“+keywords+”）”），“$1”）；
});
}

是的，该示例几乎完美，但它弄乱了样式。。。如果我用find（'a'）替换find（'li'），这一切都很好。非常感谢你的帮助。：）如果你认为这是正确的答案，我很高兴能帮上忙；请再投票表决。：-）ignore case version从IE9中的错误“无法获取属性“menu”的值：对象为null或未定义”是的，我认为它应该不区分大小写。-@brechtvhb这是您的答案还是@fozylet的？如果@fozylet's你能给他们评分吗？我怎么能根据fozylet's的答案（2012年1月18日）给出我的答案（2011年4月23日）？2015年，这是答案：）最佳答案。简单解决方案.me.text（me.text（）.replace（新的RegExp（“（“+keywords+”），“$1”）；将最后一行中的me.text

me.html（me.text…

替换为html，以避免将标记打印为实体，例如

sea

replace

me.text（…

替换为：

let textWrapper=me.find（'.ui菜单项包装器'）；let text=textWrapper.text（）；let newTextHtml=text.replace（new RegExp（“+keywords+”），“gi”）)，“$1”）；textWrapper.html（newTextHtml）；

保留突出显示颜色。谢谢。B.t.w.您的类名中有一个拼写错误：“ui自动完成突出显示”而不是“ui自动完成突出显示”

$.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 + '>$1</span>');

        return $('<li><a href="#">' + label + '</a></li>').appendTo(ul);
    }
});

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

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

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>$1</b>'));
     });
 }