微信小程序 搜索dome

搜索dome

wxml

<view class="SearchBox">
  <view class="Search_input_top_box">
    <view class="Search_ico_box">
	      <icon class="Search_ico weui-icon-search_in-box" type="search" size="14"></icon>
    </view>
    <input class="Search_Input" focus="{{name_focus}}" placeholder='请输入搜索内容' bindinput='inputvalue' value="{{input_value}}" bindconfirm="wxSearchConfirm" ></input>
    <view class="Search_btn" bindtap='search'>{{SearchText}}</view>
  </view>
  <view class="Search_xian">
	<view></view>
  </view>
  <!--搜索记录盒子-->
  <view class="Search_record_box">
    <view class="Search_record_text">
      <text>搜索记录</text>
	  <view class="dele fr">
        <icon bindtap='delete_list' type="clear" size="14"></icon>
    </view>
    </view>
    <!--记录词的盒子-->
    <view class="History_box">
      <view class="History-list">
        <text wx:for="{{listarr}}" data-text="{{item}}" wx:key="key" bindtap='this_value'>{{item}}</text>
      </view>
    </view>
  </view>
</view>

js

Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		inpuVal: "",//input框内值
		listarr: [],//创建数组
		SearchText: '取消',//按钮变动值
		keydown_number: 0,//检测input框内是否有内容
		input_value: "",//value值
		hostarr: [],//热门搜索接收请求存储数组  
		name_focus: true//获取焦点
	},
	// 搜索关键字
	searchTap: function () {
		var that = this;
		var data = that.data.listData;
		var newData = that.data.listDataCopy;
		for (var i = 0; i < data.length; i++) {
			var dic = data[i];
			var newDic = newData[i];
			var text = dic["text"];
			newDic["text"] = getInf(text, that.data.keyName);
		}
		that.setData({
			listDataCopy: newData,
		})
	},
	/**
	* 搜索  请求接口传参
	*/
	//取值input判断输入框内容修改按钮
	inputvalue: function (e) {
		this.setData({
			inputVal: e.detail.value
		})
		if (e.detail.cursor != 0) {
			this.setData({
				SearchText: "搜索",
				keydown_number: 1
			})
			if (e.detail.value.length >  0) {
				wx.request({
					url: 'url',
					data: {
						term: e.detail.value
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					success: function (res) {
						if (res.code == 200) {
							var data = that.data.lists;
							for (let i = 0; i < res.data.length; i++) {
								data.push(res.data[i]);
							}
							that.setData({
								input_value: value.detail.value,
								lists: data
							})
						}
					},
					fail: function (res) { },
					complete: function (res) { },
				})
			}
		} else {
			this.setData({
				SearchText: "取消",
				keydown_number: 0
			})
		}
	},
	//搜索方法
	search: function () {
		if (this.data.keydown_number == 1) {
			let This = this;
			//把获取的input值插入数组里面
			
			let arr = this.data.listarr;
			console.log(this.data.inputVal)
			console.log(this.data.input_value)
			//判断取值是手动输入还是点击赋值
			if (this.data.input_value == "") {
				// console.log('进来第er个')
				// 判断数组中是否已存在
				let arrnum = arr.indexOf(this.data.inputVal);
				console.log(arr.indexOf(this.data.inputVal));
				if (arrnum != -1) {
					// 删除已存在后重新插入至数组
					arr.splice(arrnum, 1)
					arr.unshift(this.data.inputVal);

				} else {
					arr.unshift(this.data.inputVal);
				}

			} else {
				console.log('进来第一个')
				let arr_num = arr.indexOf(this.data.input_value);
				console.log(arr.indexOf(this.data.input_value));
				if (arr_num != -1) {
					arr.splice(arr_num, 1)
					arr.unshift(this.data.input_value);
				} else {
					arr.unshift(this.data.input_value);
				}

			}
			console.log(arr)

			//存储搜索记录
			wx.setStorage({
				key: "list_arr",
				data: arr
			})


			//取出搜索记录
			wx.getStorage({
				key: 'list_arr',
				success: function (res) {
					This.setData({
						listarr: res.data
					})
				}
			})
			this.setData({
				input_value: '',
			})
		} else {
			console.log("取消")
		}

	},
	//清除搜索记录
	delete_list: function () {
		//清除当前数据
		this.setData({
			listarr: []
		});
		//清除缓存数据
		wx.removeStorage({
			key: 'list_arr'
		})
	},
	//点击赋值到input框
	this_value: function (e) {
		this.setData({
			name_focus: true
		})
		let value = e.currentTarget.dataset.text;
		this.setData({
			input_value: value,
			SearchText: "搜索",
			keydown_number: 1
		})
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {

		let This = this;
		//设置当前页标题
		wx.setNavigationBarTitle({
			title: '搜索'
		});
		//读取缓存历史搜索记录
		wx.getStorage({
			key: 'list_arr',
			success: function (res) {
				This.setData({
					listarr: res.data
				})
			}
		})
	},
})

wxss

page {
  background: #ffffff;
}
.Search_input_top_box {
  margin-top: 12rpx;
  position: relative;
  margin-bottom: 16rpx;
}
 
.Search_Input {
  width: 600rpx;
  height: 68rpx;
  border-radius: 30rpx;
  background: #fff;
  border: 2rpx solid #bbb;
  margin-left: 20rpx;
  display: inline-block;
  vertical-align: middle;
  padding-left: 58rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #393939;
}
 
.Search_btn {
  display: inline-block;
  width: 130rpx;
  height: 58rpx;
  font-size: 30rpx;
  color: #393939;
  /* margin-top: 18rpx; */
  vertical-align: middle;
  line-height: 58rpx;
  text-align: center;
}
 
.Search_ico {
  width: 100%;
  height: 100%;
}
 
.Search_ico_box {
  position: absolute;
  left: 40rpx;
  top: 14rpx;
  width: 23rpx;
  height: 28rpx;
  z-index: 999;
}
 
.Search_xian {
  width: 100%;
  height: 1rpx;
  background: #dcdcdc;
  margin-bottom: 32rpx;
}
 
.Search_record_text>text {
  font-size: 28rpx;
  color: #898989;
  margin-left: 20rpx;
}
.hot_box_text>text {
  font-size: 28rpx;
  color: #898989;
  margin-left: 20rpx;
}
.hot_box_text {
   margin-top: 40rpx;
}
.Search_record_text>image {
  width: 44rpx;
  height: 44rpx;
  vertical-align: middle;
  float: right;
  margin-right: 20rpx;
}
 
.History-list {
  margin-left: 20rpx;
  margin-top: 28rpx;
  margin-right: 20rpx;
}
 
.History-list>text {
  display: inline-block;
  height: 56rpx;
  border-radius: 5px;
  background: #f5f5f5;
  max-width: 100%;
  padding-left: 24rpx;
  padding-right: 24rpx;
  line-height: 56rpx;
  font-size: 26rpx;
  color: #393939;
  margin-bottom: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
  box-sizing: border-box;
  margin-right: 20rpx;
}
.dele {
    width: 24rpx;
    height: 26rpx;
    position: relative;
  
   right: 60rpx;
}
.fr{float: right}