微信小程序搜索框功能实现_微信小程序搜索框怎么做

说明：本文只涉及了微信小程序前端部分的代码实现，需要的后台列表数据原本已经查询出来了的

思路实现：

1、首先确定自己想要的搜素效果大概是怎么样的，我想到的大概效果是在搜索输入框输入内容时根据搜索内容是否被包含在资讯列表的标题里面，如果包含在里面，那么会被模糊查询出对应的资讯列表里面，并把数据保存在一个新的资讯列表数组里面，这里面可以用 change事件来触发，代码如下：

wxml代码如下：

 <van-search
  value="{{ value }}"
  label="资讯"
  placeholder="资讯查询"
  input-align="center"
  use-action-slot
  bind:change="onChange"
  bind:search="onSearch"
  bind:cancel="onCancel"
>
  <view slot="action" bind:tap="onClick">搜索</view>
</van-search>

 

js代码如下：

 // 数据初始化
  data: {
    listImg: [], // 轮播图数据
    isLunbo:false,//是否初始化了轮播数据
    list: [], // 当前列表数据
    searchList:[],//搜素框模糊查询出来的结果
    newList:[],//查询的列表数据
    page: 1, // 当前页码
    id:'10',
    limit: 10, // 每页数据量
    loading: false, // 是否正在加载
    loaded: false ,// 是否已经加载完全部数据
    value: '', // 搜索框输入的值
    searchview:false
  },
 
  // 搜索输入框值变化事件
  onChange(e) {
    const value = e.detail;
  
    this.setData({
      value: value
    });
  
    if (value.trim() === '') {
      // 输入框没有值或者值为空时，不执行搜索逻辑
      this.setData({
        searchview: false,
        searchList: []
      });
      return;
    }
  
    const searchResult = this.data.list.filter(item => {
      return item.title.includes(value);
    });
  
    if (searchResult.length > 0) {
      this.setData({
        searchview: true,
        searchList: searchResult
      }, () => {
        // 在动态渲染完成后，滚动到搜索结果视图
        this.setData({
          scrollIntoView: 'searchResultView'
        });
      });
    } else {
      this.setData({
        searchview: false,
        searchList: []
      });
    }
  },

上面代码使用了vant框架组件，需要做对应的引入，这里不做详细 说明，详情参考开发文档：

Vant Weapp - 轻量、可靠的小程序 UI 组件库

 2、然后是点击搜索的时候也会搜索出对应的内容，对应触发事件函数的实现如下：

onClick(event) {
    console.log("点击事件触发");
    console.log(this.data.value);
    if (this.data.value.trim() === '') {
      wx.showToast({
        title: '请输入搜索内容',
        icon: 'none'
      });
      return;
    }
    const searchResult = this.data.list.filter(item => {
      return item.title.includes(this.data.value);
    });
    if (searchResult.length > 0) {
      this.setData({
        searchview: true,
        searchList: searchResult
      }, () => {
        // 在动态渲染完成后，滚动到搜索结果视图
        this.setData({
          scrollIntoView: 'searchResultView'
        });
      });
    } else {
      wx.showToast({
        title: '未找到相关资讯',
        icon: 'none'
      });
    }
  },

 

3、最后是搜索出来的资讯列表内容的展示界面的代码实现：

wxml如下：

 <!-- 搜索结果显示框 -->
<view wx:if="{{ searchview }}" class="mask">
  <view class="maskContent" bindtap="onMaskClick">
    <scroll-view class="scrollview" scroll-y="true" scroll-into-view="searchResultView" scroll-with-animation>
      <view wx:for="{{ searchList }}" wx:key="index" bindtap="searchView" data-index="{{ index }}">
        <view class="scrollItem">
          <text class="text-searchview">{{ searchList[index].title }}</text>
          <text class="text-searchview">{{ searchList[index].creationTime }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

wxss代码如下：

/* 遮罩层样式 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
 
/* 搜索结果显示框样式 */
.scrollview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 80vh;
  width: 90%;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
 
.scrollItem {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
 
.text-searchview {
  color: #333;
}

js代码如下：

  

searchView(event) {
    const index = event.currentTarget.dataset.index;
    const selectedInfo = this.data.searchList[index];
    console.log("点击搜索结果视图");
    console.log(selectedInfo.title);
 
    // 检查搜索框是否为空，若为空则直接返回
    if (this.data.value.trim() === '') {
      return;
    }
 
    // 隐藏遮罩层
    this.setData({
      searchview: false
    });
  
    wx.navigateTo({
      url: '/pages/news/news?infoId=' + encodeURIComponent(selectedInfo.id)
    });
  },

 上面searchView函数实现了，点击搜索出来的资讯列表里面的某一条记录的时候会跳转到具体的资讯详情页面news，至于具体的news页面的这里不做具体说明。基于上述代码完成了一个微信小程序简单的搜索功能