小程序 商品搜索

 

 

 

<view class="SearchBox">

<view class="Search_input_top_box">

<view class="Search_ico_box">

<image class="Search_ico" src="../../images/home_icon_search_nor@2x.png"></image>

</view>

<input class="Search_Input" focus="{{name_focus}}" placeholder='请输入商品、品牌名称进行搜索' bindinput='inputvalue' value="{{input_value}}"></input>

<view class="Search_btn" bindtap='search'>{{SearchText}}</view>

</view>

<view class="Search_xian"></view>

<!--搜索记录盒子-->

<view class="Search_record_box">

<view class="Search_record_text">

<text>搜索记录</text>

<image bindtap='delete_list' src='../../images/search_icon_del_nor@2x.png'></image>

</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 class="hot_box">

<view class="hot_box_text">

<text>热门搜索</text>

</view>

<!--热门词的盒子-->

<view class="History_box">

<view class="History-list">

<text wx:for="{{hostarr}}" data-text="{{item}}" wx:key="key" bindtap='this_value'>{{item}}</text>

</view>

</view>

</view>

</view>

 

 

 

 

 

 

 

 

 

 

 

 

 

/* pages/search/search.wxss */

page {

background: #ffffff;

}

.Search_input_top_box {

margin-top: 12rpx;

position: relative;

margin-bottom: 16rpx;

}

.Search_Input {

width: 600rpx;

height: 58rpx;

border-radius: 5px;

background: #ececec;

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: 5rpx;

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;

}

 

 

 

 

 

 

 

 

Page({

/**

* 页面的初始数据

*/

data: {

inpuVal: "",//input框内值

listarr: [],//创建数组

SearchText: '取消',//按钮变动值

keydown_number: 0,//检测input框内是否有内容

input_value: "",//value值

hostarr: [],//热门搜索接收请求存储数组

name_focus: true//获取焦点

},

//取值input判断输入框内容修改按钮

inputvalue: function (e) {

this.setData({

inputVal: e.detail.value

})

if (e.detail.cursor != 0) {

this.setData({

SearchText: "搜索",

keydown_number: 1

})

} 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

})

}

})

//请求热门搜索

// wx.request({

// url: 'http://192.168.1.222:8081/StaticPage/list.json', //仅为示例，并非真实的接口地址

// method: 'GET',

// data: {},

// success: function (res) {

// This.setData({

// hostarr: res.data.History

// })

// },

// fail: function (err) {

// console.log(err)

// }

// })

}

})