Web前端之JavaScript实现模糊查询、微信小程序实现纯前端搜索、查找、重组、截取、indexOf、filter、RegExp、split、match、join、test、push

JavaScript多种方式实现搜索

1、数据源

let arr1 = [{ id: 1, title: '计算机' }, { id: 2, title: '手机' }, { id: 3, title: '平板' }, { id: 4, title: '手抄' }],
	arr2 = ['7a7', '66agg', '3jk', '6a79', 'aa6', '886'];

2、regExp、split、join、filter与match

let reg = new RegExp(`(.*)(${'平'.split('').join(')(.*)(')})(.*)`, 'i'),
	values = arr1.filter((item) => item.title.match(reg));

console.log(values);
// [{id: 3, title: "平板"}]

3、filter与indexOf

console.log(arr1.filter((item) => !item.title.indexOf('手')));
// [{ id: 2, title: '手机' }, { id: 4, title: '手抄' }]

4、test与push

function recombination(params) {
    let newArray = [];
    
    for (i = 0; i < params.length; i++) if (/(a7)/.test(params[i])) newArray.push(params[i]);
    
    return newArray;
}

console.log(recombination(arr2));
// ['7a7', '6a79']

微信小程序实现前端模糊搜索

说明

1.分页
2.返回顶部
3.实时搜索
4.点击搜索
5.自定义组件
6.父组件向子组件传值
7.父组件调用子组件中的方法（函数）
8.子组件向父组件传值
9.清除输入框
10.模糊查询正则匹配
11.全局样式

1、页面

1.1、Html

<view>
	<!-- 搜索 -->
	<view class="fixed_0_0 back_FFF z_index_9">
		<view class="border_b_666" style="display:{{isImg?'block':'none'}}">
			<view class="grid_c2_350 padding_l_36 padding_tb_22 grid_row_gap_16">
				<view>每页条数：{{cont}}</view>

				<view>总条数：{{total}}</view>

				<view>当前页数：{{page-1}}</view>

				<view>总页数：{{totalPage}}</view>
			</view>

			<view class="grid_c3_200 padding_l_36 grid_row_gap_18 grid_column_gap_42">
				<view class="border_111 padding_10 radius_6">0:暂未开发</view>
				<view class="border_111 padding_10 radius_6">1:已完成</view>
				<view class="border_111 padding_10 radius_6">2:开发未结束</view>
				<view class="border_111 padding_10 radius_6">3:只有源码</view>
				<view class="border_111 padding_10 radius_6">4:已废弃</view>
			</view>

			<view class="margin_t_26">
				<radio-group bindchange="radioChange">
					<view class="dis_r_se">
						<label class="">
							<radio value="1" checked="true" />点击搜索
						</label>
						<label class="">
							<radio value="2" />实时搜索
						</label>
					</view>
				</radio-group>
			</view>

			<search id="searchId" pla="{{pla}}" btnTitle="{{btnTitle}}" searchType="{{searchType}}" bind:myEvent="onMyEvent"></search>
		</view>

		<view class="dis_r_c padding_tb_16" catchtap="showSearch">
			<image class="img" src="{{isImg?'/image/public/towards_top.png':'/image/public/towards_bottom.png'}}"></image>
		</view>
	</view>

	<!-- 功能列表 -->
	<view class="{{isImg?'margin_t_570':'margin_t_90'}}">
		<view class="dis_r_sb margin_tb_20 padding_tb_20 padding_lr_30 border_b_666" wx:for="{{dataList}}" wx:key="index" bindtap="details" data-item="{{item}}">
			<view class="dis_r_fs width_520 font_size_30">
				<view class="flex_1 font_weight_700">{{index+1}}、</view>
				<view class="flex_9 ellipsis color_777">{{item.status}}-{{item.title}}</view>
			</view>

			<view class="width_100 radius_6 font_size_26 color_EEE back_555 line_height_60 text_align_center letter_spacing_2" catchtap="sourceCode" data-url="{{item.url}}" wx:if="{{item.url}}">源码</view>
		</view>
	</view>

	<!-- 返回顶部 -->
	<backToTop wx:if="{{scrollTop}}"></backToTop>
</view>

1.2、json

{
	"usingComponents": {
		"search": "/components/search/search"
	},
	"navigationBarTitleText": "伪搜索"
}

1.3、JavaScript

const {
  globalData: {
    jsonData: {
      functionList
    },
    showToast
  }
} = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList: [],
    scrollTop: false,
    searchType: 1,
    btnTitle: '搜索',
    pla: '请输入标题',
    page: 1,
    cont: 10,
    total: 0,
    totalPage: 0,
    scrolls: true,
    isImg: false
  },

  // 展开搜索
  showSearch() {
    this.setData({
      isImg: !this.data.isImg,
      searchType: this.data.searchType
    });
  },

  // 选择搜索类型
  radioChange({
    detail: {
      value
    }
  }) {
    // 调用子组件的函数方法
    this.selectComponent("#searchId").initData();

    this.setData({
      searchType: value,
      page: 1,
      scrolls: true,
      dataList: []
    });
    this.getData();
  },

  // 获取数据
  getData() {
    wx.showLoading({
      title: '加载中',
      mask: true
    });
    let page = this.data.page,
      totalPage = this.data.totalPage,
      cont = this.data.cont,
      dataList = this.data.dataList,
      newData = [];
    if (page > totalPage) {
      this.setData({
        scrolls: false
      });
      return showToast('没有更多数据了', 'none', 2000, false);
    };
    for (let i = cont * page - 10; i < page * cont; i++) {
      const item = functionList[i];
      if (item) {
        newData.push(item);
      };
    };
    this.setData({
      dataList: [...dataList, ...newData],
      page: page += 1
    });
    wx.nextTick(() => {
      wx.hideLoading();
    });
  },

  // 接收子组件传过来的值
  onMyEvent({
    detail: {
      value
    }
  }) {
    if (!value) {
      this.setData({
        dataList: [],
        page: 1,
        scrolls: true
      });
      this.getData();
      return false
    };
    this.setData({
      dataList: [],
      scrolls: false
    });
    this.setData({
      dataList: functionList.filter(function (item) {
        let inputValue = new RegExp(`(.*)(${value.split('').join(')(.*)(')})(.*)`, 'i');
        return item.title.match(inputValue);
      })
    });

    if (!this.data.dataList.length) showToast('未找到匹配的数据');
  },

  // 复制路径
  sourceCode({
    currentTarget: {
      dataset: {
        url
      }
    }
  }) {
    wx.setClipboardData({
      data: url,
      success() {
        showToast('链接复制成功', 'success');
        // wx.getClipboardData({
        //   success(res) {
        //     console.log(res.data)
        //   }
        // })
      }
    })
  },

  // 跳转到详情页面
  details({
    currentTarget: {
      dataset: {
        item: {
          path,
          status
        }
      }
    }
  }) {
    switch (status) {
      case 0:
        showToast('暂未开发');
        break;
      case 1:
        wx.navigateTo({
          url: '/' + path
        });
        break;
      case 2:
        showToast('开发未结束');
        break;
      case 3:
        showToast('无页面只有源码');
        break;
      default:
        showToast('已废弃');
        break;
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      total: functionList.length,
      totalPage: Math.ceil(functionList.length / 10)
    });
    this.getData();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.data.scrolls) {
      this.getData();
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /**
   * 监听滚动条
   */
  onPageScroll: function ({
    scrollTop
  }) {
    this.setData({
      scrollTop: scrollTop >= 100 ? true : false
    })
  }
})

2、搜索组件

2.1、Html

<view>
	<!-- 按钮搜索 -->
	<view class="dis_r_sb margin_30" wx:if="{{searchType==1?true:false}}">
		<view class="flex_6 dis_r_sb border_666 padding_10 radius_8">
			<input class="flex_8 height_50" placeholder="{{pla}}" value="{{clickInput}}" bindinput="clickInputF"></input>
			<view class="flex_1 dis_r_c margin_l_26" catchtap="clear">
				<view class="clear_30">×</view>
			</view>
		</view>

		<view class="flex_1 margin_l_36 text_align_center padding_10 radius_6 back_theme color_222 font_weight_600" catchtap="clickSearch">{{btnTitle}}</view>
	</view>

	<!-- 实时输入 -->
	<view class="dis_r_sb margin_30" wx:if="{{searchType==2?true:false}}">
		<view class="flex_6 dis_r_sb border_666 padding_10 radius_8">
			<input class="flex_8 height_50" placeholder="{{pla}}" value="{{realTimeInput}}" bindinput="realTimeInputF"></input>
			<view class="flex_1 dis_r_c margin_l_26" catchtap="clear">
				<view class="clear_30">×</view>
			</view>
		</view>
	</view>
</view>

2.2、JavaScript

const {
  globalData: {
    jsonData: {
      functionList
    },
    showToast
  }
} = getApp();

Component({
  // 此操作是使用全局样式
  options: {
    addGlobalClass: true
  },

  /**
   * 组件的属性列表
   */
  properties: {
    pla: {
      type: String,
      value: '请输入内容'
    },
    btnTitle: {
      type: String,
      value: '提交'
    },
    searchType: {
      type: Number,
      value: 1
    }
  },

  // 实时搜索
  realTimeInputF({
    detail: {
      value
    }
  }) {
    this.setData({
      realTimeInput: value
    });

    this.triggerEvent('myEvent', {
      value: this.data.realTimeInput
    });
  },

  /**
   * 组件的初始数据
   */
  data: {
    clickInput: null,
    realTimeInput: null
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 实时搜索
    realTimeInputF({
      detail: {
        value
      }
    }) {
      if (!value) {
        this.setData({
          realTimeInput: null
        });
      };

      this.setData({
        realTimeInput: value
      });
      this.triggerEvent('myEvent', {
        value: this.data.realTimeInput
      });
    },

    // 点击收集数据
    clickInputF({
      detail: {
        value
      }
    }) {
      if (!value.length) {
        this.triggerEvent('myEvent', {
          value: ''
        });
      }

      this.setData({
        clickInput: value
      });
    },

    // 点击搜索
    clickSearch() {
      let clickInput = this.data.clickInput;
      if (!clickInput) return showToast('请输入标题');
      this.triggerEvent('myEvent', {
        value: clickInput
      });
    },

    // 切换搜索类型的时候初始化数据
    initData() {
      this.setData({
        clickInput: null,
        realTimeInput: null
      });
    },

    // 清除
    clear() {
      if (this.properties.searchType == 1 && this.data.clickInput) {
        this.setData({
          clickInput: null
        });
        this.triggerEvent('myEvent', {
          value: ''
        });
        return false;
      }

      if (this.properties.searchType == 2 && this.data.realTimeInput) {
        this.setData({
          realTimeInput: null
        });
        this.triggerEvent('myEvent', {
          value: ''
        });
        return false;
      }

      showToast('请先输入标题');
    },
  }
})

置顶组件

置顶组件链接

演示