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

Posted 2023-03-05

【中文标题】如何使用 jquery ui 自动完成使匹配的文本变为粗体？

【英文标题】：How to make matched text bold with jquery ui autocomplete?

【发布时间】：2011-03-21 15:55:08

【问题描述】：

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

例如，如果您输入“ja”并且建议是 javascript 和 java（如 jquery ui 演示页面上的示例），那么我想在两个建议中都将“ja”加粗。

有人知道怎么做吗？

非常感谢您的帮助...

【参考方案1】：

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

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

【参考方案2】：

在 jQuery UI 1.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);
    
);

您现在可以使用它：

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

CSS 样式：

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

【讨论】：

谢谢。顺便提一句。您的班级名称中有错字：'ui-autocomplete-hightlight' 而不是 'ui-autocomplete-highlight'

【参考方案3】：

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

【讨论】：

2015 年，这就是答案 :)

最佳答案。简单的解决方案。

me.text(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '$1')) ;在 me.text 之后用 html 替换文本

me.html(me.text... 在最后一行，以避免将标签打印为实体，例如<b>sea</b>

将me.text(... 部分替换为：let textWrapper = me.find('.ui-menu-item-wrapper'); let text = textWrapper.text(); let newTextHtml = text.replace(new RegExp("(" + keywords + ")", "gi"), '<b>$1</b>'); textWrapper.html(newTextHtml); 以保持高亮颜色。

【参考方案4】：

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

它确实应该为您提供一个可样式化的选项，例如用<span class="ui-autocomplete-term">term</span> 或类似的东西包装它。

你可以像this那样做

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

【讨论】：

是的，这个例子几乎是完美的，但是它弄乱了样式......如果我用 find('a') 替换 find('li') 一切都很好。非常感谢您的帮助。 :)

很高兴我能提供帮助，如果您将其标记为正确答案；也请投票。 :-)

忽略大小写版本 jsfiddle.net/fozylet/kTAMm 从 here 得到想法

在 IE9 中，错误：“无法获取属性 'menu' 的值：对象为 null 或未定义”

是的，Imo 应该不区分大小写。

【参考方案5】：

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

【讨论】：

-@brechtvhb 这是你的答案还是@fozylet 的？如果@fozylet's 你能给他们点赞吗？

我的回答（2011 年 4 月 23 日）如何基于 fozylet 的回答（2012 年 1 月 18 日）？