2010-03-23 2 views
1

jQuery에 상당히 익숙합니다.이 스 니펫을 인터넷에서 발견하고이를 내 용도로 사용했습니다. 입력 할 때 페이지를 검색하고 검색 한 값이 포함되지 않은 모든 오브젝트를 제거합니다. 그것은 매력처럼 작동하지만 사용자가 입력 필드에 입력 한 문자열을 강조 표시하고 싶습니다.jQuery : 실시간 검색 결과를 강조 표시

내가 addClass와 같은 것을 사용해야한다는 것을 알고있다. ('highlight'), 그러나 나는이 스 니펫에서 어디서 어떻게 할 수 있는지 전혀 모른다. 너 나 좀 도와 줄 수있어?


(function($) { 
    var Search = function(block) { 
    this.callbacks = {}; 
    block(this); 
    } 
    Search.prototype.all = function(fn) { this.callbacks.all = fn; } 
    Search.prototype.reset = function(fn) { this.callbacks.reset = fn; } 
    Search.prototype.empty = function(fn) { this.callbacks.empty = fn; } 
    Search.prototype.results = function(fn) { this.callbacks.results = fn; } 
    function query(selector) { 
    if (val = this.val()) { 
     return $(selector + ':Contains("' + val + '")');; 
    } else { 
     return false; 
    } 
    } 

    $.fn.search = function search(selector, block) { 
    var search = new Search(block); 
    var callbacks = search.callbacks; 

    function perform() { 
     if (result = query.call($(this), selector)) { 
     callbacks.all && callbacks.all.call(this, result); 
     var method = result.size() > 0 ? 'results' : 'empty'; 
     return callbacks[method] && callbacks[method].call(this, result); 
     } else { 
     callbacks.all && callbacks.all.call(this, $(selector)); 
     return callbacks.reset && callbacks.reset.call(this); 
     }; 
    } 

    $(this).live('keypress', perform); 
    $(this).live('keydown', perform); 
    $(this).live('keyup', perform); 
    $(this).bind('blur', perform); 
    } 
})(jQuery); 

(function($) { 
    $(document).ready(function() { 
     $('input[name="livesearch"]').search('.element', function(on) { 
      on.all(function(results) { 
       var size = results ? results.size() : 0 
       $('#count').text(size + ' results.'); 
      }); 

      on.reset(function() { 
       $('#none').hide(); 
       $('#hint').show(); 
       $('.element').show(); 
      }); 

      on.empty(function() { 
       $('#none').show(); 
       $('#count').hide(); 
       $('.element').hide(); 
      }); 

      on.results(function(results) { 
       $('#none').hide(); 
       $('.element').hide(); 
       results.show(); 
      }); 
     }); 
    }); 
})(jQuery); 

답변

0

내가

+0

흠 비슷한 뭔가를이 Highlight 플러그인을 사용, 나도 내 구글 검색,하지만 내 문제에 내가 어디서에 통합하는 방법을 알고하지 않는 것을 본 적이 내 실시간 검색 ... – rayne

관련 문제