jQueryのハイライトクエリダイナミックなリストソースのためのオートコンプリート

Question

私は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 linkのように、ユーザーが入力したクエリを強調表示することです。

私の試行は以下の通りですが、私はスパンタグのテキストをユーザが入力したクエリに置き換えようとしています。私はどのように私のシナリオでこれを達成することができます。

$(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 linkを追加しました。ハイライトクエリ機能を追加したいだけです。

Answer 1

私はJQuery UIオートコンプリートを使用しているので、これは面白いと感じました。少し実験しました。

最初のもの：私は正規表現がどのように動作するかについてはゼロアイデアがありますが、ここでは正規表現が問題だと思います。

第二：私はこれが見つかりました：Case insensitive string replacement in 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"); 
    } 

希望を。 :)

EDIT：私はリンクされたstackoverflowの質問に受け入れられた回答からpreg_quote関数を追加しました。これは '名前'のようなものを検索するために必要です。正しく動作させるためです。