本文实例讲述了jQuery实现模糊查询的方法。分享给大家供大家参考,具体如下:
需求:
list列表内容很多,用户需要找出列表内容中的某些条目,只有当与用户输入值匹配的条目才显示出来。(后台无分页,直接异步接口返回数据添加形成的内容列表)虽然可以通过传参再调用查询出来,但这里主要记录的是前端处理进行模糊查询而无需再次调用接口的实现方法。
html部分:
js部分:
内容,如果是匹配全部列的话就把find()和.parent()去掉即可
$(".list-content li").hide().find(".code,.name").filter(":contains('"+queryStr+"')").parent("li").show();
//$(".list-content").refresh(); //重新刷新列表把隐藏的dom结构去掉。
}
});
}
分析:
以上即实现了前端js的模糊查询功能啦,哈哈。代码中监听事件中多加了input,据说是为兼容iOS的,具体没测试,有哪位大神测试了可以告知一声哈,谢谢了。还有个问题就是,以上实现方法,当列表内容多大几千条数目或者更多时,表单输入时会出现卡顿的情况,因为要通过js操作大量的DOM结构啊(隐藏或显示),PC上或许情况还没有那么严重,在手机上测试时那真的是“怎一个卡字了得”,如果哪位大神有更好的法子,还望加以完善!
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》、《》及《用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
css代码: js代码:
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...