jquery의 검색 결과와 일치하는 항목이없는 경우 경고를 설정하는 방법

Question

검색 기능을 구현 중입니다. 링크가 잘 작동하고 있습니다.하지만 한 가지 문제는있을 때 알림이 설정되지 않았기 때문입니다. 페이지에서 일치하는 항목을 찾을 수 없습니다. 알림을 삽입하는 위치를 알려주십시오. 경고가 표시되지 않습니다. 나는 그런 식으로 끝냈다. .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); 
} 

는

Answer 1

작업 데모 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; 
} 

이

if($('.match').eq(searchIndex).offset().top > $(window).height()-10){ 
    $(document).scrollTop($('.match').eq(searchIndex).offset().top); 
} 

012에 의해 코드를 스크롤 교체

Answer 2

Demo here
당신은 종료 후 추가 할 수 있습니다. 기능 정지를 만드는 진정한 NULL 다른 일치

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

이 if (matches !==null && matches.length > 0) 검색 및 반환 :

처럼. 해당 진술이 충족되지 않거나 true이면 그 이후에 경고를 할 수 있습니다.

Answer 3

false show alert의 경우 searchAndHighlight의 반환 값을 확인하십시오. 문제를

작업 데모 http://jsbin.com/umodoy/37/edit

을 JS를 스크롤하기위한

if(!searchAndHighlight(searchTerm)) 
    alert('No Matches Found.');