0

検索機能を実装しています。正常に動作しているリンクを見つけました。しかし、ページに一致するものが見つからない場合にアラートが設定されないという問題が 1 つあります。そのアラートを挿入する場所を教えてください。Iアラートが来ていないことをデバッグします。私はそのように .match.length() ==0 を実行し、アラートを表示しましたが、機能していません。助けてください。

ここにコードを見つけたリンクがあります。 http://jsbin.com/umodoy/7/edit

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();
      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).text().replace(searchTermRegEx, '<span class="match">$1</span>');
            $(selector).html(txt);
            searchIndex++;
            $('.match:first').addClass('highlighted');
           $(document).scrollTop($('.match').eq(searchIndex).offset().top);

          return true;
        }
      return false;
    }
  return false;
}

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

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

3 に答える 3

2

ワーキングデモhttp://jsbin.com/umodoy/29/edit

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).text().replace(searchTermRegEx, '<span class="match">$1</span>');
            $(selector).html(txt);
            searchIndex++;
            $('.match:first').addClass('highlighted');
           $(document).scrollTop($('.match').eq(searchIndex).offset().top);

          return true;
        }else{ //added this else here
          alert('not found');
        }
      return false;
    }
  return false;
}

スクロール問題js用

ワーキングデモhttp://jsbin.com/umodoy/37/edit

スクロールコードをこれに置き換えます

if($('.match').eq(searchIndex).offset().top > $(window).height()-10){
    $(document).scrollTop($('.match').eq(searchIndex).offset().top);
}
于 2013-07-22T11:46:25.597 に答える
1

ここでデモ
true を返す if の最後に追加できます。

お気に入り：

  return true;
    }
  alert('no matches!');
  return false;

これif (matches !==null && matches.length > 0)は、NULL 以外の一致を検索して true を返し、関数を停止します。そのステートメントが満たされていない/真でない場合は、その後にアラートを配置できます。

于 2013-07-22T11:42:13.757 に答える
1

false show alert の場合は、searchAndHighlight の戻り値を確認してください。

if(!searchAndHighlight(searchTerm))
    alert('No Matches Found.');
于 2013-07-22T11:42:35.640 に答える