小程序实现搜索框


Posted in Javascript onJune 19, 2020

小程序中搜索框的简单实现,供大家参考,具体内容如下

搜索框

搜索框无论是在电商网站还是小程序中是很常见的,那么在小程序中是如何实现的呢,我们一起来看看吧(过程遇到很多问题)。

思路

在搜索框中输入关键词时,应该会向服务器发送请求,因为没有相关接口,所以我就模拟数据啦,用文档中API中的setStorage和getStorage在本地存储数据和读取数据,在搜索框中输入时若能匹配到则显示,若匹配不到,则显示“没有数据”。

模糊搜索

search.wxml

<!--pages/search/search.wxml-->
<view class='search'>
 <input type='text' 
 placeholder='请输入您要搜索的内容'
 bindinput='input' 
 bindconfirm='confirm'/>
 <icon type='search' class='icons'></icon>
 <view wx:for="{{list}}" wx:key='' class='lists'>
 <text wx:if="{{item.show}}">{{item.name}}</text>
 </view>
</view>

search.wxss

/* pages/search/search.wxss */
.search{
 position: relative;
}
.search input{
 border:1px solid #ccc;
 border-radius: 6px;
 height: 30px;
}
.icons{
 position: absolute;
 right: 20px;
 top:5px;
}
.lists{
 text-align: center;
 margin-top: 20px;
 color: rgb(230, 124, 25);
}

search.js

// pages/search/search.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 list:[] 
 },
 //键盘输入时实时调用搜索方法
 input(e){
 // console.log(e)
 this.search(e.detail.value)
 },
 //点击完成按钮时触发
 confirm(e){
 this.search(e.detail.value)
 },
 search(key){
 var that=this;
 //从本地缓存中异步获取指定 key 的内容
 var list=wx.getStorage({
 key: 'list',
 //从Storage中取出存储的数据
 success: function(res) {
 // console.log(res)
 if(key==''){ //用户没有输入时全部显示
 that.setData({
 list:res.data
 })
 return;
 }
 var arr=[]; //临时数组,用于存放匹配到的数组
 for(let i in res.data){
 res.data[i].show=false; //所有数据隐藏
 if (res.data[i].search.indexOf(key)>=0){
 res.data[i].show = true; //让匹配到的数据显示
 arr.push(res.data[i])
 }
 }
 if(arr.length==0){
 that.setData({
 list:[{show:true,name:'没有相关数据!'}]
 })
 }else{
 that.setData({
 list: arr
 })
 }
 },
 })
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var list=[
 {name: "西安市第一人民医院", show: true, search:"西安市第一人民医院"},
 {name: "西安市第二人民医院", show: true, search: "西安市第二人民医院" },
 {name: "兰州市第一人民医院", show: true, search: "兰州市第一人民医院" },
 {name: "兰州市第二人民医院", show: true, search: "兰州市第二人民医院" }
 ]
 wx.setStorage({
 key: 'list',
 data: list
 })
 this.setData({
 list:list
 })
 },
})

效果图

小程序实现搜索框

条件搜索

searchif.wxml

<!--pages/searchif/searchif.wxml-->
<view class='search'>
 <input type='text'
 bindblur='input'/>
 <button type='primary' class='btn' size='mini'>搜索</button>
 <view wx:for="{{list}}" wx:key='' class='lists'>
 <text wx:if="{{list}}">{{item.name}}</text>
 </view>
</view>

searchif.wxss

/* pages/searchif/searchif.wxss */
.search{
 padding-left: 10px;
}
.search input{
 border:1px solid #ccc;
 border-radius: 6px;
 height: 30px;
 display: inline-block;
 padding-left: 5px;
}
.btn{
 height: 32px;
 margin-left: 10px;
}
.lists{
 text-align: center;
 margin-top: 20px;
 color: rgb(230, 124, 25);
}

searchif.js

// pages/searchif/searchif.js
Page({
 /**
 * 页面的初始数据
 */
 data: {
 list: []
 },
 //键盘输入时实时调用搜索方法
 input(e) {
 this.search(e.detail.value)
 },
 search(key) {
 var that = this;
 //从本地缓存中异步获取指定 key 的内容
 var list = wx.getStorage({
 key: 'list',
 //从Storage中取出存储的数据
 success: function (res) {
 // console.log(res)
 if (key == '') { //用户没有输入时全部显示
 that.setData({
 list: res.data
 })
 return;
 }
 var arr = []; //临时数组,用于存放匹配到的数组
 for (let i in res.data) {
 if (res.data[i].name.indexOf(key) >= 0) {
 arr.push(res.data[i])
 }
 }
 if (arr.length == 0) {
 that.setData({
 list: [{ name: '没有相关数据!' }]
 })
 } else {
 that.setData({
 list: arr
 })
 }
 },
 })
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var list = [
 { name: "西安市第一人民医院"},
 { name: "西安市第二人民医院"},
 { name: "兰州市第一人民医院"},
 { name: "兰州市第二人民医院"}
 ]
 wx.setStorage({
 key: 'list',
 data: list
 })
 this.setData({
 list: list
 })
 },
})

效果图

小程序实现搜索框

遇到的问题

在小程序文档中的setStorage里面的代码是这样写的:

wx.setStorage({
 key:"key",
 data:"value"
})

在此过程中,我在data后面的值也加了引号,结果会出错,数据拿不到,因此,要注意此处的坑吆! \color{red}{在此过程中,我在data后面的值也加了引号,结果会出错,数据拿不到,因此,要注意此处的坑吆!}在此过程中,我在data后面的值也加了引号,结果会出错,数据拿不到,因此,要注意此处的坑吆!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
js中跨域方法原理详解
Jul 19 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 #Javascript
vue cli安装使用less的教程详解
Jul 12 #Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 #Javascript
django js 实现表格动态标序号的实例代码
Jul 12 #Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 #Javascript
微信小程序开发常见问题及解决方案
Jul 11 #Javascript
使用vue for时为什么要key【推荐】
Jul 11 #Javascript
You might like
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
PHP 正则表达式小结
2015/02/12 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
js Dialog 实践分享
2012/10/22 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
公司保洁员岗位职责
2015/02/13 职场文书
无工作证明怎么写
2015/06/15 职场文书