js的filter()使用及查询方法实现
来源:互联网 发布:实时 证券 数据接口 编辑:程序博客网 时间:2024/04/29 17:40
今天为了做一个页面模糊查询的功能折腾了一上午,想了很多种方法,结果无意中发现这个js这个数组方法,很快的解决了我的问题,特此通过一个小例子记录下。也希望能帮助大家。
页面实现效果:
这个查询其实可以通过与后台交互查询结果的,但是因为数据我页面都已经获取了不需要再从后台获取同时也能提高性能还是通过js来实现吧。
代码:
先获取数据集合放在key数组中
var key=[];$(".ajx_data").each(function () { $(this).find('li').each(function() { key.push($(this).text()); });});
查询符合条件的数据事件方法
function searchVehicles(){ //获取input输入框中查询的条件值 var vehicle=$("#search").val(); //用来存储符合条件的内容 var filtered; if(vehicle!=null && vehicle!=""){ filtered = key.filter(function(item){ return item==vehicle; }); }else{ //查询条件为空的时候查询全部数据 filtered=key; } //清空已有的li标签内容,将符合条件的li重新循环加载 $(".ajx_data").children("li").remove(); for (var i = 0 ; i < filtered.length; i++) { $(".ajx_data").append("<li>"+filtered[i]+"</li>"); } }
其中filter()语法
var filteredArray = array.filter(callback[, thisObject]);
filteredArray 接收是一个数组,array是一个数组,filte放的是一个函数
符合函数条件的,也就是返回值为true都会放在filteredArray 数组中。
对于js查询搜索比较实用。
当然实现查询的还有一种方法
function searchVehicles(){ var vehicle=$("#search").val(); if(vehicle!=null && vehicle!=""){ $(".ajx_data").each(function () { $(this).find('li').each(function() { if($(this).text().indexOf(vehicle)>=0){ $(this).show(); }else{ $(this).hide(); } }); }); }else{ $(".ajx_data").each(function () { $(this).find('li').each(function() { $(this).show(); }); }); }}
后者可以不改变原有元素的样式。二者各有利弊,大家可以根据自己的需求来选择。
很高兴等把自己的东西分享出来,有不对的地方还请大家多多指教。
0 0
- js的filter()使用及查询方法实现
- js filter的使用
- JS 实现Json查询的方法实例
- js模板方法的思路及实现
- jQuery.filter()方法的使用
- 使用ADO.NET类及方法实现数据库的查询并返回一个Object 数组
- js 实现对JSON数组模糊查询的方法
- filter基础、实现例子及定义自己的filter
- JS中使用"data-"开头的属性及data()方法实现自定义属性
- JS中使用"data-"开头的属性及data()方法实现自定义属性
- ibatis 使用filter查询
- JS Array.filter()方法
- Bloom Filter的原理及实现
- 连接数据库及数据查询的简单实现方法
- Ringo.js嵌入集成(二):使用Listener Filter替换官方的JsgiServlet实现
- Filter及FilterChain的使用详解
- Filter及FilterChain的使用详解
- Filter及FilterChain的使用详解
- Java实现读取Excel(.xlsx)数据
- js 去除数组中的空值以及数组判断是否有重复数据
- java方法覆盖允许的条件
- LeetCode 263. Ugly Number
- mysql出现错误“ Every derived table must have its own alias”
- js的filter()使用及查询方法实现
- LeetCode 367. Valid Perfect Square
- C#WinForm 往线程里传参数的方法总结
- 单片机采集的MPU6050原始数据对应关系
- DOM键盘事件
- java字符串格式化String.format()
- 代码很烂,所以离职。
- WebView 加载网页内部video 横向全屏播放问题
- 初识javascript之对象继承