javascript - 如何在jquery ui自动完成中突出显示匹配的单词

Question

我想用用户输入的单词在 jquery ui 自动完成中突出显示 solr 搜索结果。我尝试了以下代码，但它只会将“<strong>word</strong>”之类的单词包装起来，而不是使其粗体。请帮忙。

<script type="text/javascript">
$(function() {
    $("#autosearch").autocomplete({
        source: function( request, response ) {
            $.ajax({
            url: "http://localhost:8983/solr/select",
            data: { 
                q: request.term,
                fl: "name",
                wt: 'json',
            }, 
            dataType: "jsonp",
            jsonp: 'json.wrf',

            success: function(data){
                var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");
                var result = $.map(data.response.docs, function(item){
                    return item.name.replace(regex, "<strong>$1</strong>");
                });
                response( result );
            }
          }); 
         },
        minLength: 2
        });
    });
</script>

Answer 1

有很多方法可以做到这一点，例如：

改变<strong>$1</strong>_<strong class='thick'>$1</strong>

然后将其添加到您的CSS：

strong.thick {font-weight:bold;}