我发现了这个fiddle,它在我的页面上的功能正是我想要的,只是我需要只有当用户点击搜索按钮(我也可以使用帮助添加)或点击回车键时才进行搜索,而不是在他们打字时。
这是代码:
//Live Search
$('.filter-bar #search').search('.filter-results li', function(on) {
on.all(function(results) {
var size = results ? results.size() : 0
$('.filter-results-count').text(size + ' results');
});
on.reset(function() {
$('.no-filter-results').hide();
$('.filter-results li').show();
});
on.empty(function() {
$('.no-filter-results').show();
$('.filter-results li').hide();
});
on.results(function(results) {
$('.no-filter-results').hide();
$('.filter-results li').hide();
results.show();
});
});
下一步将使搜索不区分大小写,并考虑一些o型
(我可以用快银或液态金属或类似的东西吗?)
如果你能修改小提琴来解决这个问题,我最好能理解。
添加了一个库,使搜索成为可能。我已经编辑了原始代码。请使用下面的代码!这将仅在您按下回车键时进行搜索。但其余的都是一样的。
(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', function(e){
if( e.which == 13) perform();
});
}
})(jQuery);