1

入力に入力された単語を強調表示するためのプラグインをセットアップしました。jsfiddle で確認できます: http://jsfiddle.net/K5PmD/

それは機能しますが、たとえば「Donec」と入力して強調表示された場合、「Donec」の後に同じ入力でスペースを押して、たとえば「Mauris」とその単語を入力できるようにプラグインを変更しようとしています最初の単語と一緒に強調表示されます。それらは互いにテキスト内になくても ("....Donec Mauris...")、テキスト内のどこかにあります。

html:

<body>
<input type="text" class="span1 disabled" id="field1" name="field1"><br> 

<p>
 Vestibulum rhoncus urna sed urna euismod, ut cursus eros molestie.
Nulla sed ante ut     diam gravida auctor eu quis augue. 
Donec eget diam malesuada, consectetur orci at, ultrices tellus. 
Duis id dui vel sem consequat rutrum eget non orci.
 Nullam sit amet libero odio. Vestibulum sapien sapien, 
molestie quis porta nec, sodales nec felis. 
 Mauris vehicula, erat eu consectetur viverra, 
dui tellus laoreet dolor, quis faucibus turpis eros non mi.  
</p>  
</body>

脚本：

$(function() {
$('#field1').bind('keyup change', function(ev) {
    // pull in the new value
    var searchTerm = $(this).val();

    // remove any old highlighted terms
    $('body').removeHighlight();

    // disable highlighting if empty
    if ( searchTerm ) {
        // highlight the new term
        $('body').highlight( searchTerm );
    }
    });
});

CSS

.highlight {
background-color: #fff34d;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}

.highlight {
padding:1px 4px;
margin:0 -4px;
}

このプラグインで解決策はありますか? または、私の希望に合う他のより良いプラグインを提案できますか?

私のjsfiddleを更新して、何かあれば投稿してください....

4

1 に答える 1

4

あなたが使用しているプラ​​グインは非常にシンプルで、厳密には一致する文字列の配列を使用せず、単語の分離自体も行いません。しかし、一般的にはそれがマッチングの自然な方法です。ただし、単語を区切り、自分でハイライトを呼び出すことで、コード内で処理できる可能性があります。

$(function() {
    $('#field1').bind('keyup change', function(ev) {
        // pull in the new value
        var searchTerm = $(this).val();

        // remove any old highlighted terms
        $('body').removeHighlight();

        // disable highlighting if empty
        if ( searchTerm ) {
            var terms = searchTerm.split(/\W+/);
           $.each(terms, function(_, term){
              $('body').highlight(term.trim());
            });                          

        }
    });
});

デモ

これは、強調表示する文字列の配列を取る使用できる別のプラグインです。

于 2013-06-07T20:33:11.247 に答える