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