-1

ユーザーが検索ボタンをクリックしたとき（ヘルプの追加を使用することもできます）またはEnterキーを押したときにのみ検索を実行する必要があることを除いて、ページで希望どおりに機能するこのフィドルを見つけました-彼らがいる間ではありません入力しています。

コードは次のとおりです。

//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 を考慮に入れることです。
（クイックシルバーや液体金属などを使用できますか？）

解決するためにフィドルを変更できれば、それを理解するのが最善です。

4

1 に答える 1

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);
于 2013-02-12T17:12:04.927 に答える