微信小程序-input实现模糊查询功能

最新推荐文章于 2024-06-25 16:30:48 发布

Strive1231

最新推荐文章于 2024-06-25 16:30:48 发布

阅读量1.1w

点赞数 15

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_41539046/article/details/102627463

本文介绍了在微信小程序中如何实现列表的模糊查询功能，避免不必要的后端请求，提升用户体验。文章详细讲解了JavaScript的indexOf、split、match和test四种方法，并进行了性能测试，结果显示match方法在性能上相对较弱，而在不区分大小写的模糊搜索中，test方法由于支持正则表达式，功能更强大。最后，分享了在实际开发中遇到的问题和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序-input实现模糊查询功能

实现模糊查询功能之需求

实现模糊查询功能之需求

今天在做小程序的时候，遇到一个需求是对列表进行模糊查询。对于模糊查询，一般都是传关键字给后端，由后端来做。但是有时候一些轻量级的列表前端来做可以减少ajax请求，在一定程度上提高用户体验。我目前的情况恰好是后台已经把全部数据给到前端了，所以就想用js对数据进行一个模糊查询。

效果图

在这里插入图片描述

实现

HTML

<view class='uinn'>
  <view class="weui-search-bar flex-row uinn bg_white mar-t">
    <view class="weui-search-bar__form flex1 flex-row">
      <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
      <input type="text" class="weui-search-bar__input" placeholder="请输入查询信息" value="{
    
    {inputVal}}" bindinput="inputTyping" class='flex1 mar-l' />
      <scroll-view class='scroll-view' wx:if='{
    
    {viewShowed}}' scroll-y>
      <view wx:for="{
    
    {carList}}" wx:key="{
    
    {index}}" class="msg-item " >
        <view class='user-name' bindtap='name' data-index="{
    
    {index}}" >{
  
  {item}}</view>
      </view>
      </scroll-view>
    </view>