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

Question

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

因此,例如,如果您键入"ja"并且建议是javascript和java(就像在jquery ui演示页面上的示例中那样),那么我想在两个建议中使"ja"变为粗体.

谁知道怎么做？

非常感谢您的帮助...

Answer 1

我不确定为什么自动完成与其包含的其他功能相比是如此简单(例如可放置,可排序,可拖动等).

它应该真的为您提供一个可设置的选项,例如用它包装<span class="ui-autocomplete-term">term</span>或类似的东西.

你可以做到像这样

它应该是非常明显的; 如果没有,请大声喊叫.

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

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);
                }) );
            });
        }