Question

我有一个jQuery自动填充功能，用户的搜索字词会在搜索结果中突出显示。感谢stackoverflow，我已经完成了大部分工作并突出了术语。

当第二个术语在第一个突出显示的代码中匹配时会出现问题，因此部分HTML会突出显示。例如。如果搜索字词是＆＃39; word1 te＆＃39;并且返回的结果包含：

＆＃34;这是word1，我正在测试＆＃34;

在我的循环的第一次迭代中，它将变为：＆＃34;这是 word1 ，我正在测试＆＃34;

第二，它不仅会突出显示＆＃39;在＆＃39;测试＆＃39;但是＆＃39;＆＃39;在＆＃39; highlightText＆＃39;。例如。＆＃34;这是 te  stingText＆＃39;＆gt; word1 ，我＆＃39; m  te 刺痛＆＃34;

现在，我可以通过将其设为粗体来简化高亮文字，而不是$1，而是$1，但如果我的用户输入了字母＆＃39; b＆＃39 ;在它自己的标签上，该标签将被标记。

我可以尝试以某种方式排除字母＆＃39; b＆＃39;从突出显示，但我希望有人有一个更优雅的解决方案。

唷！希望明白。

这是我到目前为止所得到的：

CSS：

.highlightedText {
    color: blue; font-weight:bold;
}

在stackoverflow上发现正则表达式：

    /**
    * http://kevin.vanzonneveld.net
    *   original by: booeyOH
    *   improved by: Ates Goral (http://magnetiq.com)
    *   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    *   bugfixed by: Onno Marsman
    *     example 1: preg_quote("$40");
    *     returns 1: '\$40'
    *     example 2: preg_quote("*RRRING* Hello?");
    *     returns 2: '\*RRRING\* Hello\?'
    *     example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
    *     returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:' 
 */
function preg_quote( str ) {
    return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}

这是我的代码：

$("#search_member").autocomplete({
          minLength: 2,
          source: '/controller/module/action/term/' + $(this).val(),
          delay: '500',
          select: function (event, ui) {
                  // delete what they input
                  $(this).val('');
                  // the 'value' is a URL to navigate to
                  window.location.href = '/controller/module/index/mem_code/' + ui.item.mem_code;
                  // don't populate the autocomplete box
                  return false;
          }
    }).data("autocomplete")._renderItem = function (ul, item) {
        // search and replace matched search terms with bold version
        var highlighted = item.fullname;
        var termsString = this.term;
        var termsArr = termsString.split(' ');
        for (var i = 0; i < termsArr.length; i++) {
            var term = termsArr[i];
            highlighted = (highlighted+'')
                            .replace( 
                                new RegExp( "(" + preg_quote( term ) + ")" , 'gi' )
                                , "<span class='highlightedText'>$1</span>" 
            );
        }

        var listItem = '<a>' + highlighted + ' ' + 
                    item.type_code + '</a>' ;

        $("<li></li>").data("item.autocomplete", item)
                      .append(listItem)
                      .appendTo(ul);
        return;
    };

    // clear the search box if clicked
    $('.span_link').click(function() {
        $('#search_member').val('');
        $('#table_container').hide();
    });

Answer 1

实际上在我提交之前找到了答案但是我还是提交了它，以防它帮助了其他人。

问题是我的循环;不需要它，只是改进了我的注册表，以便它一次性取代所有的单词。这是更正后的'_renderItem'功能：

.data("autocomplete")._renderItem = function (ul, item) {
    // search and replace matched search terms with bold version
    var highlighted = item.fullname;
    var termsString = this.term.trim();
    var words = termsString.split(' ').join('|');
    var regExp = new RegExp( "(" +  words + ")" , 'gi' );

     highlighted = (highlighted+'')
                     .replace( 
                         regExp
                         , "<span class='ui-state-highlight'>$1</span>" 
     );

    var listItem = '<a>' + highlighted + ' ' + 
                item.type_code + '</a>' ;

    $("<li></li>").data("item.autocomplete", item)
                  .append(listItem)
                  .appendTo(ul);
    return;
};

不需要preg_quote（）函数或自定义CSS代码段。

Javascript / jQuery：替换（突出显示）自动完成结果中的多个用户输入词

1 个答案: