Question

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

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

任何人都知道如何做到这一点？

非常感谢你的帮助...

Answer 1

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

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

你可以像this

那样做

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

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

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, '<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;
}

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

5 个答案: