1

jQueryオートコンプリートがあり、ユーザーの検索用語が検索結果で強調表示されます。stackoverflowのおかげで、私はほとんどの方法でそこに到達し、用語が強調表示されています。

問題は、最初の用語を強調表示するコードで2番目の用語が一致する場合に発生するため、HTMLの一部が強調表示されます。たとえば、検索語が「word1 te」であり、返される結果に次のものが含まれている場合：

「これはword1です、私はテストしています」

ループの最初の反復では、「これは<span class='highlightedText'>word1</span>です、テスト中です」になります。

2つ目は、「testing」の「te」だけでなく、「highlightedText」の「te」も強調表示します。例：「これは<span class='highlight<span class='highlightedText'>te </span>stingText'> word1 、</span>I'mtesting 」<span class='highlightedText'></span>

これで、ハイライトテキストを太字にするだけで簡単にできるので、ではなく<span class='highlightedText'>$1</span>、<b>$1</b>ユーザーが文字「b」を自分で入力すると、そのタグにタグが付けられます。

どういうわけか文字「b」が強調表示されないようにすることもできますが、誰かがもっとエレガントな解決策を持っていることを望んでいます。

ふぅ！それが明確であることを願っています。

これが私がこれまでに得たものです：

CSS：

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

スタックオーバーフローで正規表現が見つかりました：

    /**
    * 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();
    });
4

1 に答える 1

1

これを送信する直前に実際に答えを見つけましたが、他の人の助けになった場合に備えて、とにかく送信します。

問題は私の for ループでした。それは必要ありませんでした。一度にすべての単語を置き換えるように正規表現を改良しました。修正された '_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 スニペットは必要ありません。

于 2013-02-18T10:20:01.040 に答える