從div(page)中搜索文本將會在第二次使用查詢時崩潰。

[英]Search a text from div(page) will crash second time using query


I am implementing the search functionality after search word is highlighted .Actually I also implement next and previous functionality .Actually when i run it search the word correctly and user go next and previous (finely). But when user search second time it highlight the first word also. Here i am implementing this functionality. http://jsfiddle.net/ravi1989/wjLmx/2/

我正在實現搜索詞高亮顯示后的搜索功能,實際上我還實現了next和以前的功能。但是當用戶第二次搜索時,它也會高亮顯示第一個單詞。我在這里實現這個功能。http://jsfiddle.net/ravi1989/wjLmx/2/

If you check error :

如果你檢查錯誤:

First search : sd then go next . again search df. You find it highlight the first word also.

第一次搜索:接下來是sd。df再次搜索。你會發現它突出了第一個詞。

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 || "#realTimeContents"; //use body as selector if none provided
        var searchTermRegEx = new RegExp(searchTerm, "ig");
        var matches = $(selector).text().match(searchTermRegEx);
        if (matches != null && matches.length > 0) {
            $('.highlighted').removeClass('highlighted'); //Remove old search highlights
            $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>" + searchTerm + "</span>"));
            $('.match:first').addClass('highlighted');
            $('.next_h').on('click', i = 1, function () {

                $('.match').removeClass('highlighted');
                $('.match').eq(i).addClass('highlighted');

                i = i + 1;
                k = i - 2;

            });
            $('.previous_h').on('click', k = 1, function () {

                if (matches.length > k && k > 0) {
                    $('.match').removeClass('highlighted');
                    $('.match').eq(k).addClass('highlighted');
                    k = k - 1;
                    i = k + 2;

                }
            });

            if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears
                $(window).scrollTop($('.highlighted:first').position().top);
            }
            return true;
        }
    }
    return false;
}

$(document).on('click', '.searchButtonClickText_h', function (event) {

    $(".highlighted").removeClass("highlighted").removeClass("match");
    if (!searchAndHighlight($('.textSearchvalue_h').val())) {
        alert("No results found");
    }
});

2 个解决方案

#1


1  

Here is a suggestion for your next/previous function:

下面是對你的下一個/之前的功能的建議:

Demo here

演示

$('.next_h').off('click').on('click', i = 1, function () {
    if (i==  matches.length - 1){i = 1 }
    else{i++;};
    move(i);
});

$('.previous_h').off('click').on('click', k = 0, function () {
    if (i==1){i = matches.length - 1 }
    else{i--;};
    move(i);
    });
function move(nr){
        $('.match').removeClass('highlighted');
        $('.match').eq(nr).addClass('highlighted');
        $('.ui-mobile-viewport').animate({
            scrollTop: $('.match').eq(nr).offset().top
        }, 300);
        console.log($('.match').eq(nr).offset().top + ' offset');
};

#2


2  

You need to remove previous matches : DEMO

您需要刪除先前的匹配:DEMO。

        //Remove the previous matches
        $span = $('#realTimeContents span');
        $span.replaceWith($span.html());

UPDATE http://jsfiddle.net/wjLmx/16/

更新http://jsfiddle.net/wjLmx/16/


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/07/14/72515b8f7b0a8a2c896431f0a99240b.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com