微信小程序?qū)崿F(xiàn)簡單搜索功能
本文實例為大家分享了微信小程序?qū)崿F(xiàn)簡單搜索功能的具體代碼,供大家參考,具體內(nèi)容如下
搜索效果圖
實現(xiàn)功能如下
(1) 未找到商品時顯示提示信息,找到商品時顯示商品列表
(2) 清空搜索框時顯示搜索歷史記錄,歷史記錄可清除,點擊歷史記錄賦值到搜索框
.wxml代碼
<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="/images/delete.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="textfz">{{item}}</text> ? </view> </view> <view class="none" wx:if="{{noneview}}"> ? <image src="/images/null.png" mode="widthFix" style="width:20%"></image> ? <text>抱歉,沒有相關商品</text> </view> <view class='swiper_con' wx:if="{{shoppinglist}}"> ? <view class='swiper_con_view' wx:for="{{shoopingarray}}" wx:key="id" wx:if='{{item.status=="1"?true:false}}'> ? ? <image src="{{item.images}}" mode="widthFix" style="width:100%" data-status="{{item.status}}"></image> ? ? <view style="width:90%;margin:5%;"> ? ? ? <text style="font-size:24rpx">{{item.title}}</text> ? ? ? <view class="swiper_con_view_view"> ? ? ? ? <view style="width:80%;"> ? ? ? ? ? <text style="font-size:24rpx;color:red;">¥{{item.money}}</text> ? ? ? ? ? <text style="font-size:18rpx;color:#B8B8B8;margin-left:5%;">已售{{item.sold}}</text> ? ? ? ? </view> ? ? ? ? <image src="/images/cart.png" mode="widthFix" style="width:10%;position:relative;left:8%;"></image> ? ? ? </view> ? ? </view> ? </view> </view>
.wxss代碼
page{ ? background-color: white; } ? .top { ? width: 100%; ? background-color: #f7f7f7; } ? .topsearch { ? width: 90%; ? margin-left: 5%; ? display: flex; ? padding: 2% 0; ? align-items: center; } ? .frame { ? background-color: white; ? width: 75%; ? border-radius: 20rpx; ? padding: 0 3%; } ? .frame>input { ? font-size: 24rpx; ? margin: 6rpx 0; } ? .topsearch>text { ? width: 10%; ? margin-left: 5%; ? color: #a8a7a7fa; } ? .history { ? background-color: white; ? padding: 4%; } ? .history_title { ? font-size: 30rpx; ? display: flex; ? justify-content: space-between; ? color: #a8a7a7fa; ? align-items: center; } ? .history_text { ? padding: 4% 0; ? display: flex; ? flex-wrap: wrap; } ? .history_text>text { ? background-color: #f7f7f7; ? padding: 1% 3%; ? margin: 2%; ? border-radius: 40rpx; ? font-size: 30rpx; } ? .history_text>text:first-child{ ? margin-left: 0; } ? .none{ ? margin-top: 10%; ? display: flex; ? align-items: center; ? justify-content: center; ? flex-direction: column; } ? .swiper_con { ? width: 96%; ? margin-left: 2%; ? display: flex; ? flex-wrap: wrap; } ? .swiper_con_view { ? width: 48%; ? height: 530rpx; ? background-color: white; ? margin: 10rpx 0; } ? .swiper_con_view:nth-child(even) { ? margin-left: 4%; } ? .swiper_con_view_view { ? margin-top: 5%; ? display: flex; ? align-items: center; }
.js代碼
Page({ ? //清除歷史記錄 ? cleanhistory: function(e) { ? ? this.setData({ ? ? ? history: false, //隱藏歷史記錄 ? ? ? historyArray: [], //清空歷史記錄數(shù)組 ? ? ? newArray: [], ? ? ? shoopingtext: "" //清空搜索框 ? ? }) ? }, ? //搜索 ? search: function(e) { ? ? var searchtext = this.data.shoopingtext; //搜索框的值 ? ? var sss = true; ? ? if (searchtext != "") { ? ? ? //將搜索框的值賦給歷史數(shù)組 ? ? ? this.data.historyArray.push(searchtext); ? ? ? //模糊查詢 循環(huán)查詢數(shù)組中的title字段 ? ? ? for (var index in this.data.shoopingarray) { ? ? ? ? var num = this.data.shoopingarray[index].title.indexOf(searchtext); ? ? ? ? let temp = 'shoopingarray[' + index + '].status'; ? ? ? ? if (num != -1) { //不匹配的不顯示 ? ? ? ? ? this.setData({ ? ? ? ? ? ? [temp]: 1, ? ? ? ? ? }) ? ? ? ? ? sss = false //隱藏未找到提示 ? ? ? ? } ? ? ? } ? ? ? this.setData({ ? ? ? ? history: false, //隱藏歷史記錄 ? ? ? ? noneview: sss, //隱藏未找到提示 ? ? ? ? shoppinglist: true, //顯示商品列表 ? ? ? ? newArray: this.data.historyArray //給新歷史記錄數(shù)組賦值 ? ? ? }) ? ? } else { ? ? ? this.setData({ ? ? ? ? noneview: true, //顯示未找到提示 ? ? ? ? shoppinglist: false, //隱藏商品列表 ? ? ? ? history: false, //隱藏歷史記錄 ? ? ? }) ? ? } ? }, ? data: { ? ? shoopingtext: "", //搜索框的值 ? ? history: false, //顯示歷史記錄 ? ? noneview: false, //顯示未找到提示 ? ? shoppinglist: false, //顯示商品列表 ? ? historyArray: [], //歷史記錄數(shù)組, ? ? newArray: [], //添加歷史記錄數(shù)組 ? ? shoopingarray: [{ //商品 ? ? ? id: 0, ? ? ? images: "/images/3201.png", ? ? ? title: "完達山甄選牧場酸奶飲品牛奶飲料常溫發(fā)酵乳包...", ? ? ? money: "88.00", ? ? ? sold: "78箱", ? ? ? status: 0 ? ? }, { ? ? ? id: 1, ? ? ? images: "/images/3202.jpg", ? ? ? title: "網(wǎng)紅 天日鹽餅干 粗糧早餐 代餐宿舍小吃零食 130g*...", ? ? ? money: "26.80", ? ? ? sold: "34包", ? ? ? status: 0 ? ? }] ? }, ? //搜索框的值 ? shoppinginput: function(e) { ? ? //當刪除input的值為空時 ? ? if (e.detail.value == "") { ? ? ? this.setData({ ? ? ? ? history: true, //顯示歷史記錄 ? ? ? ? shoppinglist: false //隱藏商品列表 ? ? ? }); ? ? ? //所有商品列表的狀態(tài)改為0 ? ? ? for (var index in this.data.shoopingarray) { ? ? ? ? let temp = 'shoopingarray[' + index + '].status'; ? ? ? ? this.setData({ ? ? ? ? ? [temp]: 0, ? ? ? ? }) ? ? ? } ? ? } ? ? this.setData({ ? ? ? shoopingtext: e.detail.value ? ? }) ? }, ? //點擊歷史記錄賦值給搜索框 ? textfz: function(e) { ? ? this.setData({ ? ? ? shoopingtext: e.target.dataset.text ? ? }) ? } })
tips:
(1) 本篇博客為顯示效果,在搜索時通過修改商品列表中的status字段值來顯示商品列表,建議在實際開發(fā)過程中傳入搜索框內(nèi)容到后臺,后臺查詢后返回商品列表,以免占用過多資源。
(2) 每次進入搜索頁面歷史記錄為空,建議將搜索歷史記錄放入緩存中,下次進入搜索頁面時顯示搜索歷史記錄。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript高級程序設計 閱讀筆記(十四) js繼承機制的實現(xiàn)
繼承是面向?qū)ο笳Z言的必備特征,即一個類能夠重用另一個類的方法和屬性。在JavaScript中繼承方式的實現(xiàn)方式主要有以下五種:對象冒充、call()、apply()、原型鏈、混合方式2012-08-08JS實現(xiàn)求數(shù)組起始項到終止項之和的方法【基于數(shù)組擴展函數(shù)】
這篇文章主要介紹了JS實現(xiàn)求數(shù)組起始項到終止項之和的方法,基于數(shù)組擴展函數(shù)實現(xiàn)該功能,涉及javascript針對數(shù)組的簡單判斷、遍歷等相關操作技巧,需要的朋友可以參考下2017-06-06深入淺出ES6新特性之函數(shù)默認參數(shù)和箭頭函數(shù)
這篇文章主要介紹了深入淺出ES6新特性之函數(shù)默認參數(shù)和箭頭函數(shù) 的相關資料,需要的朋友可以參考下2016-08-08javascript利用apply和arguments復用方法
這篇文章主要介紹了javascript利用apply和arguments復用方法,有需要的朋友可以參考一下2013-11-11基于javascript的COOkie的操作實現(xiàn)只能點一次
這篇文章主要介紹了基于javascript的COOkie的操作實現(xiàn)只能點一次,需要的朋友可以參考下2014-12-12