0

ここに画像の説明を入力

div から検索テキストを操作しています。実際には、検索テキストはヘッダーの後ろに隠されています。

次の手順を実行してください。

  1. ヘッダーの 4 番目のボタンをクリックします。検索フィールドに「インド」と入力して表示されます
  2. 次に、検索ボタンを押します (最低 10 回)。検索テキストによるいくつかの検索の後、ヘッダーの後ろにあります。
  3. 私はそれに画像を表示します。上下にスクロールすると検索結果が表示されます。

これが私のコードです

http://jsfiddle.net/ravi1989/q2HxP/2/

var searchIndex = -1;
var searchTermOld ='';

$(document).ready(function(){
  $('.searchbox').on('change',function(){
    if($(this).val()===''){
      var  selector= "#realTimeContents";
     $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
    }
      searchIndex = -1;
      $('.searchNext').attr("disabled", "disabled");
      $('.searchPrev').attr("disabled", "disabled");
    searchTermOld = $(this).val();
  });
  $('.searchbox').on('keyup',function(){

    var  selector= "#realTimeContents";
    if($(this).val()===''){
     $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
    }
    if($(this).val() !== searchTermOld){
     $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
      searchIndex = -1;
      $('.searchNext').attr("disabled", "disabled");
      $('.searchPrev').attr("disabled", "disabled");                              
  }
  });
  $('.search').on('click',function(){


    if(searchIndex == -1){
      var searchTerm = $('.searchbox').val();
      if(searchTerm==''){
         PG_alert("Please Insert Text.")
        return ;
      }
      searchAndHighlight(searchTerm);
    }
    else searchNext();
    if($('.match').length >1){
      $('.searchNext').removeAttr("disabled");
      $('.searchPrev').removeAttr("disabled");
    }
  });

  $('.searchNext').on('click',searchNext);

  $('.searchPrev').on('click',searchPrev);
});

function searchAndHighlight(searchTerm) {
    if (searchTerm) {
        var searchTermRegEx, matches;
        var  selector= "#realTimeContents";
        $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
        try {
            searchTermRegEx = new RegExp('('+searchTerm+')', "ig");
        } catch (e) {
            return false;
        }
        $('.highlighted').removeClass('highlighted');
        matches = $(selector).text().match(searchTermRegEx);
                if (matches !==null && matches.length > 0) {
            var txt = $(selector).html().replace(searchTermRegEx, '<span class="match">$1</span>');
            $(selector).html(txt);
            searchIndex++;
           $('.match:first').addClass('highlighted');
         if($('.match').eq(searchIndex).offset().top > $(window).height()-15){
  $(document).scrollTop($('.match').eq(searchIndex).offset().top)+500;
}
          return true;
        }else{
          PG_alert('Search not found.');
        }
      return false;
    }
  return false;
}

function searchNext(){
  searchIndex++;
  if (searchIndex >= $('.match').length) searchIndex = 0;
  $('.highlighted').removeClass('highlighted');
  $('.match').eq(searchIndex).addClass('highlighted');
if($('.match').eq(searchIndex).offset().top > $(window).height()-10){
  $(document).scrollTop($('.match').eq(searchIndex).offset().top)+500;
}
}

function searchPrev(){
  searchIndex--;
  if (searchIndex < 0) searchIndex = $('.match').length - 1;
  $('.highlighted').removeClass('highlighted');
  $('.match').eq(searchIndex).addClass('highlighted');
 if($('.match').eq(searchIndex).offset().top > $(window).height()-10){
  $(document).scrollTop($('.match').eq(searchIndex).offset().top);
}
}

$(document).on('click', '.search_h', function() {
  //$( "#searchPopupScreen" ).popup( "open" )
   window.scrollTo(0,0);
  $(".searchbox").val('');
    $("#realTimeContents").css("height", "");

   $(".highlighted").removeClass("highlighted").removeClass("match");
     // $('.searchbox').focus();
$("input[type=range]").val(60).slider("refresh");
   $(".searchContend_h").toggle("slow");
});

$(document).on('click', '.follow_h', function() {

 window.scrollTo(0, document.body.scrollHeight);


});

この質問の更新はありますか?

4

0 に答える 0