折翼天使资源社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 98|回复: 0

[文档教程] 微信小程序实现输入框带搜索记录功能

[复制链接]

7860

主题

8261

帖子

284

积分

网站编辑

Rank: 8Rank: 8

天使之心
0
注册时间
2013-8-22
发表于 2018-11-23 11:22:32 | 显示全部楼层 |阅读模式
微信小程序实现输入框带搜索记录功能,代码如下,很简单
  1. wxml:
  2. 搜索
  3. 清除搜索历史
  4. {{item}}
  5. js:
  6. var searchArray = []
  7. input_txt: function(e) {//输入框输入事件
  8. that.setData({
  9. searchTxt: e.detail.value.trim()
  10. })
  11. },
  12. btn_search: function() {//搜索确认事件
  13. if (that.data.searchTxt == "") {
  14. wx.showToast({
  15. title: '商品名不为空',
  16. image: '/images/error.png',
  17. duration: 1000
  18. })
  19. return;
  20. }
  21. that.buildHistory(that.data.searchTxt)//调用历史记录事件
  22. },
  23. //建立搜索记录
  24. buildHistory: function(e) {
  25. if (wx.getStorageSync("history").length > 0 && wx.getStorageSync("history").length < 8) {//小于指定数量之内
  26. let index = wx.getStorageSync("history").indexOf(e)
  27. if (index < 0) {//数据不存在时直接追加
  28. searchArray = wx.getStorageSync("history").concat(e)
  29. wx.setStorageSync("history", searchArray)
  30. } else {//数据已存在时调到头部
  31. searchArray = wx.getStorageSync("history")
  32. searchArray.splice(index, 1)
  33. searchArray = searchArray.concat(e);
  34. wx.setStorageSync("history", searchArray)
  35. }
  36. } else if (wx.getStorageSync("history").length >= 8) {//大于指定数量
  37. let index1 = wx.getStorageSync("history").indexOf(e)
  38. if (index1 > -1) {//数据已存在时掉到头部
  39. searchArray = wx.getStorageSync("history")
  40. searchArray.splice(index1, 1)
  41. searchArray = searchArray.concat(e);
  42. wx.setStorageSync("history", searchArray)
  43. return;
  44. }
  45. //数据不存在时删除第一个后追加
  46. searchArray = wx.getStorageSync("history")
  47. searchArray.splice(0, 1)
  48. searchArray = searchArray.concat(e);
  49. wx.setStorageSync("history", searchArray)
  50. } else {//无数据时候直接追加
  51. searchArray = searchArray.concat(e)
  52. wx.setStorageSync("history", searchArray)
  53. }
  54. },
复制代码
复制代码