2013-02-12 74 views
-1

我發現this fiddle的功能完全如何,我希望它在我的網頁上,除了我需要的搜索只發生在用戶單擊搜索按鈕(我也可以使用幫助添加)或點擊輸入鍵 - 而不是他們正在打字。jquery實時搜索:用按鈕觸發?

下面的代碼:

//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型的。
(我可以使用快速銀或液態金屬或類似的東西?)

如果你可以修改小提琴來解決,這將是最好的,我理解。

+1

您最終必須正確學習JS,爲什麼不現在通過一些教程? – 2013-02-12 17:11:06

+1

@Asad該問題的答案通常是「截止日期」。 – Blazemonger 2013-02-12 17:13:40

+1

@Blazemonger對,但如果你學會了如何在沒有外部輸入的情況下完成任務,你可以更快地完成截止日期。只是修改這段代碼是回答這個問題的一種方法,但我認爲從長遠來看,解決問題的這種方法對於OP來說是可持續的。 – 2013-02-12 17:16:43

回答

0

有一個庫,使搜索成爲可能。我編輯了原始代碼。請使用下面的代碼!這隻會在您按下回車鍵時進行搜索。但其餘的仍然是一樣的。

(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); 
+0

謝謝你,我用你的代碼和我的頁面返回此引用jquery作爲源的錯誤:「Uncaught TypeError:無法調用方法'toLowerCase'undefined」再次感謝 – Fspjon 2013-02-12 20:49:31