微信小程序开发之带搜索记录的搜索框
实现功能:点击搜索框,有搜索记录时以下拉菜单显示,点击下拉子菜单,将数据赋值到搜索框,点击搜索图标搜索,支持清空历史记录,可手动输入和清空查询关键字,
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();
},
微信小程序开发之带搜索记录的搜索框的更多相关文章
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 微信小程序开发 记录
采坑了 微信小程序--TabBar不出现的一种原因 学习微信小程序中,遇到底部的TabBar不出现的问题.经过多番尝试,终于解决问题.在此记录问题产生的原因和对策.下面先描述错误现象,接着指出错误原因 ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序开发部署
一.开发准备 1,想要开发微信小程序,必须要有一个AppId,如果没有可以去注册一个. https://mp.weixin.qq.com/进入注册页面,点击上方注册. 2,点击选择“小程序”出 ...
- 【好好编程-技术博客】微信小程序开发中前后端的交互
微信小程序开发中前后端的交互 微信小程序的开发有点类似与普通网页的开发,但是也不尽然相同.小程序的主要开发语言是JavaScript,开发同普通的网页开发有很大的相似性,对于前端开发者而言,从网页开发 ...
- 微信小程序开发《一》:阿里云tomcat免费配置https
小狼咕咕最近开启了微信小程序开发的征程,由于微信小程序的前后台通信必须通过https协议,所以小狼咕咕第一件要做的事就是配置一个能够通过https访问的后台服务.小狼咕咕用的是阿里云ECS服务器,Li ...
- 零基础入门微信小程序开发
注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...
- 微信小程序开发平台新功能「云开发」快速上手体验
微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一 ...
- 微信小程序开发及相关设置小结
今年过年,主要看了<奇葩说>和<电锯惊魂>,很不错,好东西的确需要留出足够的时间来看,匆匆忙忙走马观花是对作者的不尊重.除此之外,就是研究了一下微信小程序开发,先说对小程序的看 ...
随机推荐
- 流畅python学习笔记第十八章:使用asyncio编写服务器
在这一章中,将使用asyncio写一个TCP服务器.这个服务器的作用是通过规范名称查找Unicode字符,来看下代码: import asyncio from charfinder import Un ...
- 使用log4j将不同级别的日志信息输出到不同的文件中
使用log4j.xml xml格式的配置文件可以使用filter. 例如想只把log4j的debug信息输出到debug.log.error信息输出到error.log,info信息输出到info.l ...
- JAVA线程sleep和wait方法区别 代码
package test; import java.util.Date; import java.util.Random; public class test { public static void ...
- HTTP的referer机制
Quesion: 在项目中遇到了访问某些网络上的图片但是打开是forbidden的情况,原来这是一些网站为了避免图片被盗取所以采取的保护机制,如果不是从原网站上访问的图片,就禁止访问.那么这种情况应该 ...
- SDUT 2133 数据结构实验之栈三:后缀式求值
数据结构实验之栈三:后缀式求值 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 对于一个基于二元运算符的后缀表示式(基本操作数都是 ...
- 《机器学习实战》学习笔记第二章 —— K-近邻算法
主要内容: 一.算法概述 二.距离度量 三.k值的选择 四.分类决策规则 五.利用KNN对约会对象进行分类 六.利用KNN构建手写识别系统 七.KNN之线性扫描法的不足 八.KD树 一.算法概述 1. ...
- LightOJ - 1079 Just another Robbery —— 概率、背包
题目链接:https://vjudge.net/problem/LightOJ-1079 1079 - Just another Robbery PDF (English) Statistics ...
- PYTHON 爬虫笔记八:利用Requests+正则表达式爬取猫眼电影top100(实战项目一)
利用Requests+正则表达式爬取猫眼电影top100 目标站点分析 流程框架 爬虫实战 使用requests库获取top100首页: import requests def get_one_pag ...
- python的tkinter对话框
import tkinter.messagebox #这个是消息框,对话框的关键 root = tkinter.Tk() root.withdraw() a=tkinter.messagebox.sh ...
- web前端js过滤敏感词
web前端js过滤敏感词 这里是用文本输入框还有文本域绑定了失去焦点事件,然后再遍历敏感词数组进行匹配和替换. var keywords=["阿扁","呵呵", ...