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

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

微信小程序开发之带搜索记录的搜索框的更多相关文章

  1. 剖析简易计算器带你入门微信小程序开发

    写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...

  2. 微信小程序开发 记录

    采坑了 微信小程序--TabBar不出现的一种原因 学习微信小程序中,遇到底部的TabBar不出现的问题.经过多番尝试,终于解决问题.在此记录问题产生的原因和对策.下面先描述错误现象,接着指出错误原因 ...

  3. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  4. 微信小程序开发部署

    一.开发准备 1,想要开发微信小程序,必须要有一个AppId,如果没有可以去注册一个.   https://mp.weixin.qq.com/进入注册页面,点击上方注册.   2,点击选择“小程序”出 ...

  5. 【好好编程-技术博客】微信小程序开发中前后端的交互

    微信小程序开发中前后端的交互 微信小程序的开发有点类似与普通网页的开发,但是也不尽然相同.小程序的主要开发语言是JavaScript,开发同普通的网页开发有很大的相似性,对于前端开发者而言,从网页开发 ...

  6. 微信小程序开发《一》:阿里云tomcat免费配置https

    小狼咕咕最近开启了微信小程序开发的征程,由于微信小程序的前后台通信必须通过https协议,所以小狼咕咕第一件要做的事就是配置一个能够通过https访问的后台服务.小狼咕咕用的是阿里云ECS服务器,Li ...

  7. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  8. 微信小程序开发平台新功能「云开发」快速上手体验

    微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一 ...

  9. 微信小程序开发及相关设置小结

    今年过年,主要看了<奇葩说>和<电锯惊魂>,很不错,好东西的确需要留出足够的时间来看,匆匆忙忙走马观花是对作者的不尊重.除此之外,就是研究了一下微信小程序开发,先说对小程序的看 ...

随机推荐

  1. 流畅python学习笔记第十八章:使用asyncio编写服务器

    在这一章中,将使用asyncio写一个TCP服务器.这个服务器的作用是通过规范名称查找Unicode字符,来看下代码: import asyncio from charfinder import Un ...

  2. 使用log4j将不同级别的日志信息输出到不同的文件中

    使用log4j.xml xml格式的配置文件可以使用filter. 例如想只把log4j的debug信息输出到debug.log.error信息输出到error.log,info信息输出到info.l ...

  3. JAVA线程sleep和wait方法区别 代码

    package test; import java.util.Date; import java.util.Random; public class test { public static void ...

  4. HTTP的referer机制

    Quesion: 在项目中遇到了访问某些网络上的图片但是打开是forbidden的情况,原来这是一些网站为了避免图片被盗取所以采取的保护机制,如果不是从原网站上访问的图片,就禁止访问.那么这种情况应该 ...

  5. SDUT 2133 数据结构实验之栈三:后缀式求值

    数据结构实验之栈三:后缀式求值 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 对于一个基于二元运算符的后缀表示式(基本操作数都是 ...

  6. 《机器学习实战》学习笔记第二章 —— K-近邻算法

    主要内容: 一.算法概述 二.距离度量 三.k值的选择 四.分类决策规则 五.利用KNN对约会对象进行分类 六.利用KNN构建手写识别系统 七.KNN之线性扫描法的不足 八.KD树 一.算法概述 1. ...

  7. LightOJ - 1079 Just another Robbery —— 概率、背包

    题目链接:https://vjudge.net/problem/LightOJ-1079 1079 - Just another Robbery    PDF (English) Statistics ...

  8. PYTHON 爬虫笔记八:利用Requests+正则表达式爬取猫眼电影top100(实战项目一)

    利用Requests+正则表达式爬取猫眼电影top100 目标站点分析 流程框架 爬虫实战 使用requests库获取top100首页: import requests def get_one_pag ...

  9. python的tkinter对话框

    import tkinter.messagebox #这个是消息框,对话框的关键 root = tkinter.Tk() root.withdraw() a=tkinter.messagebox.sh ...

  10. web前端js过滤敏感词

    web前端js过滤敏感词 这里是用文本输入框还有文本域绑定了失去焦点事件,然后再遍历敏感词数组进行匹配和替换. var keywords=["阿扁","呵呵", ...