1

ページにテキスト検索機能を実装しています。たくさんのリンクが見つかりました。しかし、もっと多くの機能が必要です。

ここに良い例があります http://jsfiddle.net/z7fjW/137/

function searchAndHighlight(searchTerm, selector) {
    if(searchTerm) {
        //var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only
        //var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters
        var selector = selector || "body";                             //use body as selector if none provided
        var searchTermRegEx = new RegExp(searchTerm,"ig");
        var matches = $(selector).text().match(searchTermRegEx);
        if(matches) {
            $('.highlighted').removeClass('highlighted');     //Remove old search highlights
                $(selector).html($(selector).html()
                    .replace(searchTermRegEx, "<span class='highlighted'>"+searchTerm+"</span>"));
            if($('.highlighted:first').length) {             //if match found, scroll to where the first one appears
                $(window).scrollTop($('.highlighted:first').position().top);
            }
            return true;
        }
    }
    return false;
}

しかし、最初の単語（最初に現在）を検索し、次を使用して次へ（次の位置に移動）、前（前の位置に移動）のようにメモ帳のように検索する必要がありますか？これはクエリで可能ですか？

4

2 に答える 2

3

それらを直接強調表示する代わりに、クラス「一致」を追加して操作します

$(selector).html($(selector).html()
                    .replace(searchTermRegEx, "<span class='match'>"+searchTerm+"</span>"));

//to highlighted specific index 
$('.match:first').addClass('highlighted');

//to work with index you need you var matches to know what indexes exist
$('.match').eq(3).addClass('highlighted');

デモ

于 2013-07-08T06:45:37.913 に答える
0

私はhttp://jsfiddle.net/ruddog2003/z7fjW/141/を見ましたが、それは素晴らしい出発点でした。次と前の両方を許可し、もう少し堅牢にするために、ロジックを少し変更しました。完璧ではありませんが、ここでは私のコードを AJAX 形式で示しています

HTML

> <div data-role="content">
>     <div id="fulltext-search"> 
>         <input type="text" name="search-input" value="" placeholder="Type text here..."/>
>         <input type="button" name="search-action" value="Search"/>
>         <button id="searchPrevious"> &lt;&lt; </button>
>         <button id="searchNext"> &gt;&gt; </button>
>     </div>
> </div>

CSS

#document_fulltext [data-role="content"] #fulltext-search {
    width: 100%;
    text-align: center;
    position: fixed;
    top: 0px;
    background-color: rgba(255,255,255, 0.8);
    z-index: 10000;
    border-bottom: 1px solid #000;
}
.highlighted {
    color: white;
    background-color: rgba(255,20,0,0.5);

    padding: 3px;
    border: 1px solid red;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

JavaScript イベント

$(document).ready(function( ) {
    loadFulltext();
    //Load full text into the designated div
    function loadFulltext(searchString){
        //reset
        $("#fulltext").html('');
        filePath = 'http://localhost/income_tax_act_58_of_1962.html';
        $.ajax({
            url: filePath,
            beforeSend: function( xhr ) {
                xhr.overrideMimeType( "text/html; charset=UTF-8;" );
            },
            cache: false,
            success: function(html){
                $("#fulltext").html(html);
                // if search string was defined, perform a search
                if ((searchString != undefined) && (searchString != '') && (searchString != null)){
                    if(!searchAndHighlight(searchString, '#fulltext')) {
                        alert("No results found");
                    }
                }
            },
            fail: function(){
                alert('FAIL');
            }
        });
    }
    /* ------------------------------ CLICK - REFRESH DOCUMENTS LIST --- */
    $(document).on('click', 'input[name="search-action"]', function ( event ){
        // load fresh copy of full text into the div and perform a search once it is successfully completed
        loadFulltext($('input[name="search-input"]').val());
    });
});

JavaScript 関数

function searchAndHighlight(searchTerm, selector) {
    if(searchTerm) {
        $('.highlighted').removeClass('highlighted');     //Remove old search highlights
        $('.match').removeClass('match');     //Remove old matches

        //var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only
        //var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters
        var selector = selector || "body";                             //use body as selector if none provided
        var searchTermRegEx = new RegExp(searchTerm,"ig");
        var matches = $(selector).text().match(searchTermRegEx);
        // count amount of matches found
        if(matches) {
            alert('['+matches.length+'] matches found');
            // replace new matches
            $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>"+searchTerm+"</span>"));
            // add highligt to first matched class
            $('.match:first').addClass('highlighted');

            // keep track of next and previous. Start at one because on SEARCH the forst one was already highlightes
            var matchIndex = 1;
            // look out for user click on NEXT
            $('#searchNext').on('click', function() {
                //Re-set match index to create a wrap effect if the amount if next clicks exceeds the amount of matches found
                if (matchIndex >= matches.length){
                    matchIndex = 0;
                }

                var currentMatch = $('.match');
                currentMatch.removeClass('highlighted');

                var nextMatch = $('.match').eq(matchIndex);
                matchIndex += 1;
                nextMatch.addClass('highlighted');

                // scroll to the top of the next found instance -n to allow easy viewing
                $(window).scrollTop(nextMatch.offset().top-30);
            });
            // look out for user click on PREVIOUS
            $('#searchPrevious').on('click', function() {
                //Re-set match index to create a wrap effect if the amount if next clicks exceeds the amount of matches found
                if (matchIndex < 0){
                    matchIndex = matches.length-1;
                }

                var currentMatch = $('.match');
                currentMatch.removeClass('highlighted');

                var previousMatch = $('.match').eq(matchIndex-2);
                matchIndex -= 1;
                previousMatch.addClass('highlighted');

                // scroll to the top of the next found instance -n to allow easy viewing
                $(window).scrollTop(previousMatch.offset().top-30);
            });

            // if match found, scroll to where the first one appears
            if($('.highlighted:first').length) {
                $(window).scrollTop($('.highlighted:first').position().top);
            }
            return true;
        }
    }
    return false;
}
于 2014-12-10T14:19:39.327 に答える