微信小程序含历史记录的搜索框怎么开发

　　小编之前介绍过小程序搜索框的开发教程，很多朋友表示对于实现小程序搜索功能方面，这个搜索框很有用。但是现在功能升级啦，大家可以开发微信小程序含历史记录的搜索框了，这到底能实现什么新的小程序功能呢?怎么开发？一起来了解下!

　　实现功能：点击搜索框，有搜索记录时以下拉菜单显示，点击下拉子菜单，将数据赋值到搜索框，点击搜索图标搜索，支持清空历史记录，可手动输入和清空查询关键字，

　　效果:

　　开发代码：

　　wxml：

　　{{item.name}}

　　清空历史记录

　　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();

　　},

　　微信小程序含历史记录的搜索框能够实现的功能和开发的代码小编都在上文中做了详细地阐述，希望大家参照这个小程序代码能够一次*开发成功，更多相关资料请关注微信小程序商店。

　　微信小程序搜索框编写怎么做?

　　实现微信小程序搜索框跳转的相关代码

　　微信小程序搜索框实现代码