首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >jquery生活搜索?

jquery生活搜索?
EN

Stack Overflow用户
提问于 2009-08-25 13:52:19
回答 1查看 2.1K关注 0票数 2

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

有没有人用过这个?http://rikrikrik.com/jquery/quicksearch/#usage还有,你如何将它与分页或ajax相结合来处理大量数据?

代码:

HTML:

代码语言:javascript
运行
复制
<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:

代码语言:javascript
运行
复制
$('#q').liveUpdate('#posts');

使用这个作为插件:

代码语言:javascript
运行
复制
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();
      });
    }
  }
};
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2009-08-25 13:58:53

For John Resigcomment for John Resigquicksilver plugin

For John Nunemaker

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1328417

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档