1

テキスト検索にこの jquery プラグインを使用しています:" http://code.google.com/p/jquery-highlight/downloads/list "..

しかし、このコードを angular js でラップすることはできません。つまり、「この jquery プラグインを呼び出すディレクティブを記述できない」ということです...!!!

更新しました ：

Google グループの同じ投稿:

これがグループです

4

2 に答える 2

2

更新: これは単なる例です。必要に応じて変更できます。

そのためにRegExp比較は必要ありません。JavaScriptのsplit()機能を簡単に利用しよう

1) 強調表示のスタイルを定義します。

.srchslctn{
    background-color: yellowgreen;
    color: red;
}

2) サンプル HTML

<body>
    <div>
        <div id="serach-Paragraph">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        </div>
        <input type="button" id="h" value="Highlight"/>
        <div id="target"></div>
    </div>
</body>

3) JavaScript

            $(document).ready(function(){
            $("#h").on('click',function(){
                highlight(); 
            });
        });

        function highlight(){
            $("#target").empty();
            var mainString = $("#serach-Paragraph").html();
            var searchString = "ipsum";
            var arr = mainString.split(searchString);
            var len = arr.length;
            var finalString="";
            for(var i=0;i<arr.length;i++){

                finalString+=arr[i];

                if(i<len-1){
                    finalString+='<span class="srchslctn">'+searchString+'</span>';
                }
            }
            $("#target").html(finalString);
        }

それでおしまい....

説明 -: split()searchString に従って targetString を壊します。これは、カンマ区切りの値を取得する方法に似ています。この場合、唯一のことは、検索文字列がコンマのように機能することです:)

あとarr[0]はそのままで。検索文字列を強調表示して、に追加しますarr[0]。arr[1]上記の結果などに追加します。

単純....

検索されたテキストは、一致した部分のみを強調表示し、残りのテキストをそのまま維持する必要がありますか?

于 2012-07-27T10:04:44.293 に答える
0

Angular-UI ハイライトフィルターを使用できます。

于 2014-01-13T09:48:03.567 に答える