小程序实现搜索框


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 图片轮播(5张图片)
Dec 30 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
Vue 递归多级菜单的实例代码
May 05 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
Python 3中的yield from语法详解
2017/01/18 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
在python中求分布函数相关的包实例
2020/04/15 Python
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
班级聚会策划书
2014/01/16 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
服务承诺书格式
2014/05/21 职场文书
电子专业自荐信
2014/07/01 职场文书
齐云山导游词
2015/02/06 职场文书
学生会辞职信
2015/03/02 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
奠基仪式致辞
2015/07/30 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL