微信小程序模糊搜索

tiffany_kim

于 2021-03-30 09:33:11 发布

阅读量2.4k

点赞数 3

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/tiffany_kim/article/details/115306386

版权

这篇博客介绍了微信小程序中实现模糊搜索的功能，包括未找到商品时显示提示、清空搜索框展示历史记录并支持清除，以及搜索结果显示和商品删除操作。文章通过view、wxss和js代码展示了具体实现过程。

摘要由CSDN通过智能技术生成

小功能 小程序模糊搜索

搜索也是小程序常见的一个小功能，此为模糊搜索案例，实际开发中建议传入搜索框内容到后台，后台查询后返回商品列表，以免占用过多资源。

实现功能如下
(1) 未找到商品时显示提示信息，找到商品时显示商品列表

(2) 清空搜索框时显示搜索历史记录，历史记录可清除，点击历史记录赋值到搜索框

view代码如下

<view class="top">
  <view class="topsearch">
    <view class="frame">
      <input value="{
    {shoopingtext}}" bindinput="shoppinginput"></input>
    </view>
    <text bindtap="search">搜索</text>
  </view>
</view>
<view class="history" wx:if="{
    {history}}">
  <view class="history_title">
    <text>历史搜索</text>
    <image src="http://photo.weitianxia.cn/uploadhtml5_2021-03-10_6048401a4fff4.png" mode="widthFix" style="width:5%;" bindtap="cleanhistory"></image>
  </view>
  <view class="history_text">
    <text wx:for="{
    {newArray}}" wx:key="key" data-text="{
    {item}}" bindtap=