【详细】小程序搜索功能实现

搜索功能是app，小程序中非常常见的一个需求，作为常见的需求，如何高效地完成该需求的实现，就异常关键。那么小程序中如何从0到1实现搜索功能呢？请看本文

效果展示

历史记录

跳转到详情页面（详情页面开发链接/m0_37218227/article/details/107297203）

搜索页wxml

<searchbar bindsearchinput="onSearchInputEvent"></searchbar><view class='history-list-group' wx:if="{{histories && !subjects}}"><view class='history-title'><view class='title'>历史记录</view><view class='clear' bindtap="onClearEvent">清除</view></view><navigator wx:for="{{histories}}" wx:key="{{item.id}}" url='/pages/detail/detail?type=movie&id={{item.id}}' class='history-group'>{{item.title}}</navigator></view><view class='item-list-group'><view wx:for="{{subjects}}" class='item-group' wx:key="{{item.id}}" bindtap="onItemTapEvent" data-id="{{item.id}}" data-title="{{item.title}}"><image src='{{item.pic.normal}}' class='thumbnail'></image><view class='info-group'><view class='title'>{{item.title}}</view><view class='rate-year'>{{item.rating.value}}分/{{item.year}}</view></view></view></view>

搜索页wxss

.item-list-group{padding: 10rpx 20rpx;}.item-list-group .item-group{padding: 10rpx 0;border-bottom: 1px solid #e4e4e4;display: flex;}.item-group .thumbnail{width: 80rpx;height: 100rpx;margin-right: 20rpx;}.item-group .info-group{flex: 1;display: flex;flex-direction: column;justify-content: space-between;}.info-group .title{font-size: 32rpx;}.info-group .rate-year{font-size: 28rpx;color: #7b7b7b;}.history-list-group{padding: 10rpx 20rpx;}.history-list-group .history-title{display: flex;justify-content: space-between;padding: 20rpx 0;background: #f9f9f9;font-size: 28rpx;color: #9e9e9e;}.history-list-group .history-group{font-size: 32rpx;padding: 20rpx 0;border-bottom: 1px solid #e4e4e4;}

js文件

// pages/search/search.jsimport {network} from "../../utils/network.js";Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;wx.getStorage({key: 'searched',success: function(res) {var data = res.data;that.setData({histories: data})},})},onSearchInputEvent: function(event){var that = this;var value = event.detail.value;if(!value || value === ""){that.setData({subjects: null});return;}network.getSearch({q: value,success: function(subjects){that.setData({subjects: subjects})}})},onItemTapEvent: function(event){var that = this;var id = event.currentTarget.dataset.id;var title = event.currentTarget.dataset.title;var histories = that.data.histories;var isExisted = false;if(histories){for(var index=0;index<=histories.length;index++){var movie = histories[index];if(movie.id === id){isExisted = true;break;}}}if(!isExisted){if(!histories){histories = [];}histories.push({title:title,id:id});wx.setStorage({key: 'searched',data: histories,success: function () {console.log("保存成功！");}})}wx.navigateTo({url: "/pages/detail/detail?type=movie&id="+id,});},onClearEvent: function(event){wx.removeStorage({key: 'searched',success: function(res) {console.log("删除成功！");},});this.setData({histories: null});}})