實現功能：點擊搜索框，有搜索記錄時以下拉菜單顯示，點擊下拉子菜單，將數據賦值到搜索框，點擊搜索圖標搜索，支持清空歷史記錄，可手動輸入和清空查詢關鍵字，

UI:

wxml：

<!--查詢歷史記錄數據-->
<view class="ddclass" style="margin-left: 50rpx;z-index:80" hidden="{{!StorageFlag}}" style="z-index:100">
<view wx:for="{{sercherStorage}}" wx:key="item.id">
<view class="liclass" style="color:#ec9e14;border-bottom:0;" id="{{item.id}}" bindtap="tapSercherStorage">
<text style="width:100rpx">{{item.name}}</text>
</view>
</view>
<view wx:if="{{sercherStorage.length!==0}}" style="text-align:center;" bindtap="clearSearchStorage">
<text style="text-align:center;color:red;font-size:28rpx">清空歷史記錄</text>
</view>
</view>

wxss：

/*二級菜單外部容器樣式*/
.ddclass {
position: absolute;
width: 100%;
margin-top: 10px;
left: 0;

}


/*二級菜單普通樣式*/

.liclass {
font-size: 14px;
line-height: 34px;
color: #575757;
height: 34px;
display: block;
padding-left: 18px;
background-color: #fff;
border-bottom: 1px solid #dbdbdb;
}

/*二級菜單高亮樣式*/

li.highlight {
background-color: #f4f4f4;
color: #48c23d;
}

js：

data:{

sercherStorage: [],

inputValue: "", //搜索框輸入的值

StorageFlag: false, //顯示搜索記錄標誌位

}

//獲取輸入框的輸入信息
bindInput: function (e) {
this.setData({
inputValue: e.detail.value
})
},

//清楚輸入框數據
clearInput:function(){
this.setData({
inputValue: ""
})
},
//清楚緩存歷史並關閉歷史搜索框
clearSearchStorage: function () {
wx.removeStorageSync(‘searchData‘)
this.setData({ sercherStorage: [],
StorageFlag: false, })
},
//點擊緩存搜索列表
tapSercherStorage:function(e)
{
var that = this;
var index = parseInt(e.currentTarget.id);
for (var j = 0; j < that.data.sercherStorage.length; j++) {
if (j == index) {
//將所選的搜索歷史加到搜素框
this.setData({
inputValue: that.data.sercherStorage[j].name,
StorageFlag: false,
})
}}
if (this.data.inputValue != ‘‘) {
//請求搜索記錄
}

},
//打開歷史記錄列表
openLocationsercher:function(e)
{
this.setData({
sercherStorage: wx.getStorageSync(‘searchData‘) || [], //調用API從本地緩存中獲取數據
StorageFlag: true,
listFlag: true,
})
},
//添加搜索記錄並搜索
setSearchStorage: function () {
//let data;
var that=this;
//let localStorageValue = [];
if (this.data.inputValue != ‘‘) {
//將搜索記錄更新到緩存
var searchData = that.data.sercherStorage;
searchData.push({
id: searchData.length,
name: that.data.inputValue})
wx.setStorageSync(‘searchData‘, searchData);
that.setData({ StorageFlag: false,})

//請求搜索
/*wx.request({
url: ‘‘,
data: {SercherValue:that.data.inputValue,
SercherTypeNum:that.data.SercherTypeNum,
typeItem:that.data.typeItem },
header: {},
method: ‘‘,
dataType: ‘‘,
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})*/
//wx.navigateTo({
// url: ‘../result/result‘
// })
// console.log(‘馬上就要跳轉了！‘)
} else {
console.log(‘空白的你搜個jb‘)
}
// this.onLoad();
},

微信小程序開發之帶搜索記錄的搜索框