【问题标题】:jquery livesearch?jQuery 实时搜索?
【发布时间】:2010-11-22 15:22:15
【问题描述】:

我正在寻找一个不错的快速实时搜索/过滤器。

有人用吗? http://rikrikrik.com/jquery/quicksearch/#usage 另外,如何将它与分页或 ajax 结合起来处理大量数据?

代码:

HTML:

<form method="get" autocomplete="off" action="">
<input type="text" value="" name="q" id="q"><br><br>
</form>
<ul id="posts">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

JS:

$('#q').liveUpdate('#posts');

将其用作插件:

jQuery.fn.liveUpdate = function(list){
  list = jQuery(list);

  if ( list.length ) {
    var rows = list.children('li'),
      cache = rows.map(function(){
        return this.innerHTML.toLowerCase();
      });

    this
      .keyup(filter).keyup()
      .parents('form').submit(function(){
        return false;
      });
  }

  return this;

  function filter(){
    var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];

    if ( !term ) {
      rows.show();
    } else {
      rows.hide();

      cache.each(function(i){
        var score = this.score(term);
        if (score > 0) { scores.push([score, i]); }
      });

      jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
        jQuery(rows[ this[1] ]).show();
      });
    }
  }
};

【问题讨论】:

    标签: jquery filtering live search


    【解决方案1】:

    【讨论】:

    • 好的,有必要提供一些可以帮助你的例子
    猜你喜欢
    • 2015-03-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-30
    • 2011-10-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多