添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

今天为了做一个页面模糊查询的功能折腾了一上午,想了很多种方法,结果无意中发现这个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();

后者可以不改变原有元素的样式。二者各有利弊,大家可以根据自己的需求来选择。

很高兴能把自己的东西分享出来,有不对的地方还请大家多多指教。

【JavaScript】查漏补缺 —数组filter()方法 一、filter()方法 该方法用于过滤数组成员,满足条件的成员组成一个新数组返回。它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。 上面代码将大于3的数组成员,作为一个新数组返回。 上面代码中,filter()方法返回数组arr里面所有布尔值为true的成员。 filter()方法的参数函数可以接受三个参数:当前成员,当前位置和整个数组。 上面代码返回偶数位置的成员组成的 这个页面,获取表格数据是用了混入里的方法getTableData(pager, queryParams),分别传入页码和参数等,这里watch里立即监听了表格数据的变化,并对表格数据顺序前端做了处理,满足a.id == this.rowFormGet.docId的行排在最前面,对el-table自定义排序方法可以参考我之前发的文章。需求:用户在输入框输入多个条件时,可以对表格数据进行过滤查询,无需后端接口处理,利用了前端js数组filter方法进行过滤。 Array.filter(function(currentValue, indedx, arr), thisValue) 其中,函数 function 为必须,数组中的每个元素都会执行这个函数。且如果返回值为 true,则该元素被保留;   函数的第一个参数 curren filter过滤器:用于把Array的某些元素过滤掉,返回剩下的元素。生活中用到的筛子就是过滤器,细孔的筛子可以用来过滤出粉质细腻的面粉,粗一点的筛子可以用来过滤出个头饱满的黄豆,把一些未发育完全的瞎豆子筛出去;净水器可以过滤水中杂质,得到干净的水。我们的代码中也可以用过滤器,得到我们想要的结果!filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。每天学习一点点,每天进步一点点! { name: 'David Carlson', age: 30 }, { name: 'John Cena', age: 34 }, { name: 'Mike Sheridan', age: 25 filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 var newArray = arr.filter(callback(element[, index[, selfArr]])[, thisArg]) callback 循环数组每个元素时调用的回调函数。回调函数返回 true 表示保留该元素,false 则不保留。它接受以下三个参数: (1)element 数组中当前正在处理的元素。 (2)index可选 filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意:filter() 不会对空数组进行检测。 注意:filter() 不会改变原始数组filter的作用:过滤数组中符合条件的元素 过滤掉 空元素、null、undefined var arr = [1, 2, , 3, , -3, null, , 0,... 一个vue项目中难免会遇到一些地方需要用到filter,那么怎么写,才能在各个组件中肆意使用啦. 一,在static目录下新建一个filter目录,在filter目录下创建一个filter.js文件,这里举一个给商品价格精确不足两位的补0,比如22.2->22.20,22->22.00 * 给商品价格加补0 * @param {*} value const addZero=function(value){ var value=Math.round(parse