2

これはハイライト効果のある単純な検索機能ですが、一致した文字列ではなく単語全体をハイライトします。

一致した単語の一部だけを強調表示するブラウザでctrl+fを実行するようにするにはどうすればよいですか？

$(document).ready(function(){
    $('input').keyup(function(){

       $("ul li").removeClass('hightlight');

       var searchInput = $(this).val();

        if(searchInput !== ""){
           $("ul li:contains('" + searchInput + "')").addClass('hightlight');
        }

    });
});

オンラインの私のコード：

http://jsfiddle.net/dennisboys/5ZEf7/1/

4

2 に答える 2

4

次のJavaScriptを使用します。

$(document).ready(function(){
    $('input').keyup(function(){

       var searchInput = $(this).val();

       $('.hightlight').contents().unwrap();

       if(searchInput !== ""){
            $("ul li:contains('" + searchInput + "')").each(function(i, e) {
                var text = $(this).text().replace(new RegExp(searchInput, 'gm'), '<span class="hightlight">' + searchInput + '</span>');
                $(this).html(text);
            })
        }

    });
});
于 2013-02-05T08:26:01.277 に答える
1

これは、必要なHTMLとcssを使用した実用的なデモです。http://jsfiddle.net/BHqTr/

$("#search").on( "keyup", function() {

        $("#items li span").contents().unwrap();

        $("#items li").each(function(){
            var search = $("#search").val();
            var item = $(this);

            var text = item.text();

            var regex = new RegExp(search, 'g');
            text = text.replace(regex, "<span class='highlight'>"+search+"</span>");
            item.html(text);
        });
    });

編集：

これは前の回答のコピーのように見えますが、必要に応じて削除できます。

于 2013-02-05T08:54:30.050 に答える