突出显示查询在jQuery自动完成动态列表源

Highlight query in jQuery Autocomplete for dynamic List source

本文关键字：动态 列表 显示 查询 jQuery      更新时间：2023-09-26

我正在尝试实现jQuery自动完成框并成功集成到我的项目中。这里我给出了jquery自动完成框作为列表元素的源代码。

    var _array = ['<li height="45px" class="ui-menu-item ui_dropdown_item" role="presentation"><a id="ui-id-302" class="ui-corner-all ui_dropdown_focus" tabindex="-1"><img class="apps-share-chips-profile-icon" src="build/assets/apple.png" onerror="helper.onImageError(this);"><span search="text">01arun23@gmail.com</span></a></li>',
'<li height="45px" class="ui-menu-item ui_dropdown_item" role="presentation"><a id="ui-id-302" class="ui-corner-all ui_dropdown_focus" tabindex="-1"><img class="apps-share-chips-profile-icon" src="build/assets/ms.png" onerror="helper.onImageError(this);"><span search="text">aaron.lee@rescue.org</span></a></li>'];

如你所见，我将li元素作为源代码，并像下面这样在jQuery中绑定它。

$(this).data('ui-autocomplete')._renderItem = function(ul, item) {
    return $(item.label).appendTo(ul);
};

所以我完成了功能。现在我想要实现的是突出显示用户输入的查询，就像在这个SO链接中给出的那样。

我的尝试如下所示，我试图用用户输入的查询替换span标记文本。我该如何在我的场景中实现这一点呢? 

$(this).data('ui-autocomplete')._renderItem = function(ul, item) {
    $(item.label).find('span').replace(new RegExp('(?![^&;]+;)(?!<[^<>]*)(' + $.ui.autocomplete.escapeRegex(this.term) + ')(?![^<>]*>)(?![^&;]+;)', 'gi'), '<span style="font-weight:bold;color:Blue;">$1</span>');
    return $(item.label).appendTo(ul);
};

但我无法实现，我不知道我的解决方案出了什么问题。欢迎踊跃回答。

编辑:我已经添加了jsfiddle链接。只是想在其中添加高亮查询功能。

由于我自己使用JQuery UI自动完成，我发现这很有趣，我尝试了一下。

首先:我不知道正则表达式是如何工作的，但我相信正则表达式是这里的问题。

第二:我发现这:大小写不敏感的字符串替换在JavaScript?

和这个正则表达式它为我工作:

.data("ui-autocomplete")._renderItem = function (ul, item) {
                var t = highlightWords(item.label, this.term);
                return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append(t)
                    .appendTo(ul);
            };
        });

    function highlightWords( line, word )
    {
        var regex = new RegExp( '(' + preg_quote(word) + ')', 'gi' );
        return line.replace( regex, "<b>$1</b>" );
    }
    function preg_quote( str ) {
        return (str+'').replace(/(['''.'+'*'?'['^']'$'(')'{'}'='!'<'>'|':])/g, "''$1");
    }

希望这对你有帮助。:)

编辑:在我链接的stackoverflow问题中从接受的答案中添加了preg_quote函数，这是需要的，所以你可以搜索像'name '这样的东西。

相关文章：