小程序自定义搜索框希望能搜索历史的

yvan.ni
1 parent 70b5e9d5
Showing 3 changed files with 70 additions and 26 deletions
components/diy_searchbox/diy_searchbox.js
components/diy_searchbox/diy_searchbox.wxml
components/diy_searchbox/diy_searchbox.wxss
@@ -19,6 +19,8 @@ Component({
 	inputShowed:1,
 	inputval:'在店铺内搜索',
 	keyword:'',
+	
+	searchRecord: [],
   },
   ready: function() {
 	var th=this;  
@@ -27,7 +29,27 @@ Component({
 		if(e.hot_keywords)
 		   th.setData({keyword:e.hot_keywords});
 	})
+	
+	var arr=wx.getStorageSync('searchRecord') || [] //若无存储则为空
+	
+	this.setData({
+	  searchRecord: arr
+	});
+	
+  },
+  
+  
+  pageLifetimes:{
+    //要处理一下，游客登录后的界面的变化,主要还该是改变会员
+    show: function () {
+	   var th=this;
+	   var arr=wx.getStorageSync('searchRecord') || [] //若无存储则为空	
+       this.setData({
+         searchRecord: arr,inputval:'',first:1,is_his:0
+       });
+    }
   },
+  
   methods: {
     //智能跳转
     go_url:function (e) {
@@ -41,17 +63,23 @@ Component({
 		  return false;
 	  }			
 	  this.setData({first:0,inputShowed:1,inputval:''});
-	  
-	  
-	  
-	  
-	},	
+	   
+	},		
+	inputFocus:function(){	
+		if(this.data.is_init) return false;
+		this.setData({is_his:1,})
+	},
-	onblur:function(){
-		var val=this.data.inputval;
-		if(val==''){
-			this.setData({first:1,});
-		}
+	onblur:function(){		
+		var th=this;
+		setTimeout(function(){
+			if(th.data.click_sear) return false;
+			var val=th.data.inputval;
+			if(val==''){
+				th.setData({first:1,});
+			}
+			th.setData({is_his:0,})
+		},300)	
 	},	
 	set_input:function(e){
 		var val=e.detail.value;
@@ -60,7 +88,23 @@ Component({
 	sear:function(){
 		var url="/pages/goods/search/search?s_key="+this.data.inputval;
 		getApp().goto(url);
-	}
+	},
+	
+	del_his:function(){
+		this.setData({
+		  searchRecord: []
+		});		
+		wx.setStorage({ key: 'searchRecord', data:[]});
+	},
+	
+	sear_key:function(e){
+		this.data.click_sear=1;
+		var str=e.currentTarget.dataset.item;	
+		var url="/pages/goods/search/search?s_key="+str;
+		this.data.click_sear=0;
+		getApp().goto(url);
+		
+	},
   }
 })
 \ No newline at end of file
@@ -3,7 +3,7 @@
  <!-- first -->
 <block wx:if="{{object.style==1}}">
 	<view class='ss' style="position: relative;">
-		<view bindtap='click_sear'  class="s1_gk_a1" wx:if="{{false}}">
+		<view bindtap='click_sear'  class="s1_gk_a1" wx:if="{{first}}">
 		   <view class='s_ge'>
 			   <image src='{{imghost}}/miniapp/images/search.png'></image>
 		    	<text>在店铺内搜索</text>
@@ -13,14 +13,14 @@
 		<view   class="s1_gk_a1" wx:else>
 		   <view class='s_ge flex'>
 			   <image class="find_img" src='{{imghost}}/miniapp/images/search.png' bindtap='sear'></image>
-				 <input id="find_inp" class="find_inp" value=""
+				 <input id="find_inp" class="find_inp" value="{{inputval}}" bindfocus="inputFocus" 
 					 bindconfirm="sear"  bindinput='set_input' focus="{{inputShowed}}" bindblur="onblur" />
 		   </view>
-			 <view class="his_str his_str1">
-			 	<view class="item">2121</view>
-			 	<view class="item">2121</view>
-			 	<view class="item">2121</view>
-			 	<view class="clear">清除</view>
+			 <view class="his_str his_str1" wx:if="{{searchRecord.length>0}}">
+				<block wx:for="{{searchRecord}}"> 
+			 	   <view class="item" bindtap="sear_key" data-item="{{item}}" >{{item}}</view>
+				</block>		 	
+			 	<view wx:if="{{searchRecord.length>0}}" class="clear" bindtap="del_his">清除</view>
 			 </view>
 		</view>		
@@ -45,20 +45,20 @@
 					<!-- <view class="pr"> -->
 						<view class="flex ali-c">
 							<text style="font-size: 40rpx;" class="iconfont icon-search" bindtap='sear'></text>
-							<input  id="find_inp" class="find_inp2" value="" 
+							<input  id="find_inp" class="find_inp2" value="{{inputval}}"  bindblur="onblur" bindfocus="inputFocus"
 									   bindconfirm="sear"  bindinput='set_input' focus="{{inputShowed}}"/>
 						</view>
-						<view class="his_str his_str2">
-							<view class="item">2121</view>
-							<view class="item">2121</view>
-							<view class="item">2121</view>
-							<view class="clear">清除</view>
+						<view class="his_str his_str2" wx:if="{{searchRecord.length>0 && is_his}}">
+							<block wx:for="{{searchRecord}}">
+							   <view class="item" bindtap="sear_key" data-item="{{item}}">{{item}}</view>
+							</block>		 	
+							<view wx:if="{{searchRecord.length>0}}" class="clear" bindtap="del_his">清除</view>
 						</view>
 						<!-- wx:if="{{inputShowed}}" -->
 				  <!-- </view> -->
-				   
+			   
 			 </view>
 	    </view>
 	    <view class='s2_right'>
@@ -140,7 +140,7 @@
 .item {
 	padding: 0 20rpx;
 	border-bottom: 2rpx solid #f0f0f0;
-	line-height: 60rpx;
+	line-height: 60rpx; text-align: left;
 }
 /* .item ~ .item {
 	border-top: 2rpx solid #f0f0f0;