小程序实现搜索框
小程序中搜索框的简单实现，供大家参考，具体内容如下
搜索框
搜索框无论是在电商网站还是小程序中是很常见的，那么在小程序中是如何实现的呢，我们一起来看看吧（过程遇到很多问题)。
思路
在搜索框中输入关键词时，应该会向服务器发送请求，因为没有相关接口，所以我就模拟数据啦，用文档中应用程序接口中的setStorage和getStorage在本地存储数据和读取数据，在搜索框中输入时若能匹配到则显示，若匹配不到，则显示"没有数据"。
模糊搜索
search.wxml
！-页面/搜索/搜索。wxml-view class=' search '输入类型=“文本”占位符='请输入您要搜索的内容bind input=' input ' bind confirm=' confirm '/icon type=' search ' class=' icons '/icon view wx : for=' { { list } } ' wx : key=' class=' list ' text wx : if=' { { item。显示} } ' { { item。name } }/text/view/view搜索。页面样式表
/* pages/search/search.wxss */.搜索{位置：相对；}.搜索输入{ border:1px实心# cccborder-radius : 6px；高度：30px }。图标{位置：绝对值；right: 20pxtop:5px}。列出{ text-align :居中；边距-top : 20px；color: rgb(230，124，25)；}search.js
//页面/搜索/搜索。js页面({/* * *页面的初始数据*/data: { list:[] }，//键盘输入时实时调用搜索方法输入(e){//控制台。记录这个。搜索(例如细节。value)}，//点击完成按钮时触发确认{这个。搜索(例如细节。value)}，search(key){ var=this；//从本地缓存中异步获取指定键的内容var列表=wx。GetStorage({ key : ' list '，//从仓库中取出存储的数据成功：函数(RES){//控制台。log(RES)if(key==' '){//用户没有输入时全部显示那个。setdata({ list : RES . data })返回；} var arr=[]；//临时数组，用于存放匹配到的数组用于(让我输入res.data){ res.data[i].show=false//所有数据隐藏if(RES . data[I])。搜索。indexof(key)=0){ RES . data[I].show=true//让匹配到的数据显示由…改编推(RES . data[I]))} } if(arr。长度==0){即。setdata({ list : [{ show : true，name: '没有相关数据!'}]})else { the。setdata({ list : arr })} }，})}，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ var list=[ {name: '西安市第一人民医院，显示：真的，搜索： '西安市第一人民医院}，{name: '西安市第二人民医院，显示：真的，搜索： '西安市第二人民医院}，{name: '兰州市第一人民医院，显示：真的，搜索： '兰州市第一人民医院}，{name: '兰州市第二人民医院，显示：真的，搜索： '兰州市第二人民医院} ] wx.setStorage({ key: 'list '，data : list })这个。setdata({ list : list })}，})效果图
条件搜索
searchif.wxml
！-页面/搜索if/搜索if。wxml-view class=' search ' input type=' text ' bind blur=' input '/button type=' primary ' class=' BTN ' size=' mini '搜索/button view wx : for=' { { list } } ' wx : key=' class=' list ' text wx : if=' { { list } } ' { { item。name } }/text/view/view搜索if。页面样式表
/*页面/搜索if/搜索if。wxss */.搜索{左填充： 10px}.搜索输入{ border:1px实心# cccborder-radius : 6px；高度： 30pxdisplay:内联块；左衬垫left: 5px}。btn { height: 32px左边距left: 10px}。列出{ text-align :居中；边距-top : 20px；color: rgb(230，124，25)；}searchif.js
//pages/search if/search if . js page({/* * *页面的初始数据*/data3360 {list: []}，//搜索方法输入(e){ this . search(e . detail . value)}，search(key){ var that//从本地缓存异步获取指定键的内容。var list=wx . getstorage({ key : ' list '，//从Storage success:函数(RES)中检索存储的数据){//console . log(RES)if(key=' '){//显示用户不输入时所有的. setdata ({list:res.data})返回；} var arr=[]；//临时数组，用于存储(res.data中的let I){ if(RES . data[I])的匹配数组。name . index of(key)=0){ arr . push(RES . data[I])} } if(arr . length==0){ that . setdata . } })} else { that . setdata({ list : arr })}，} }/* * *生命周期函数-监控页面加载*/onload:函数(选项){var list=[{name3360' Xi '安第一人民医院' }，{name:' Xi '安第二人民
遇到的问题
小程序文档中setStorage中的代码编写如下：
Wx.setstorage ({key:' key '，data:' value'})在这个过程中，我在数据后面的值加上引号，结果就会出错，数据无法获取。所以，注意这里的大坑！\color{red}{在这个过程中，我在数据后的值加上引号，结果会错，数据无法获取。所以，注意这里的坑洼！}在这个过程中，我在数据后面的值上加了引号，结果就会出错，数据无法获取，所以注意这里的坑！
以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。
