小程序实现搜索框功能

本文实例为大家分享了小程序实现搜索框功能的具体代码，供大家参考，具体内容如下

实现效果图：

xxx.wxml

！-搜索框-view class=' weui-search-bar ' view class=' weui-search-bar _ _ form '！-点击之后，出现投入框-view class=' weui-search-bar _ _ box ' icon class=' weui-icon-search _ in-box ' type=' search ' size=' 14 '/icon input type=' text ' class=' weui-search-bar _ _ input ' placeholder='搜索value=' { { InputVal } } ' focus=' { { InputShowed } } ' bind input=' InputTypeing '/！-输入款字数大于0,则显示清除按钮-view class=' weui-icon-clear ' wx : if=' { { input val。length 0 } } ' bind tap=' clearInput '图标类型=' clear ' size=' 14 '/图标/视图/视图！-没点击之前，只是一些文字和图标-label class=' weui-search-bar _ _ label ' hidden=' { { inputshow } } ' bind tap=' showInput ' icon class=' weui-icon-search ' type=' search ' size=' 14 '/icon view class=' weui-search-bar _ _ text '搜索/视图/标签/视图！-动态出现的"取消"键-view class=' weui-search-bar _ _ cancel-BTN ' hidden=' { {！输入显示} } "绑定点击="隐藏输入"取消/view/viewxxx.wxss。weui-search-bar {位置：相对；padd : 8px 10px display :-web套件-盒子；display :-web套件-flex；显示： flex盒子尺寸：边框盒子；背景-color : # efef 4；边框-top: 1rpx实心# D7D6DC边框-bottom: 1rpx实心# D7D6DC}。weui-icon-search { margin-right : 8px；字体大小：继承；}.weui-icon-search _ in-box { position : absolute；left: 10pxtop: 7px }。weui-search-bar _ _ text { display : inline-block；font-size : 14px垂直对齐： 中间；}.weui-search-bar _ _ form {位置：相对；-web套件-box-flex : 1；-web套件-flex : auto；flex:汽车；边界半径： 5px背景： # FFFFFFborder: 1rpx固体# E6E6EA}。weui-search-bar _ _ box {位置：相对；左填充左： 30px填充-右侧： 30px宽度： 100%;盒子尺寸：边框盒子；z-index : 1；}.weui-search-bar _ _ input { height : 28px；线高： 28pxfont-size : 14px}.weui-icon-clear {位置：绝对；top : 0；右： 0；padd : 7px 8px font-size : 0；}.weui-search-bar _ _ label { position : absolute；top : 0；右： 0；底部： 0；左： 0；z-index : 2；边界半径： 3px文本对齐：中心；color : # 9b9b 9 bbbackground : # FFFFFF线高： 28px}.weui-search-bar _ _ cancel-BTN { margin-left : 10px；线高： 28pxcolor : # 09bb 07 white-space : nowrap；font-size : 30 rpx}xxx.js

showInput:函数(){这个。setdata({ inputshoutd : true })；}，隐藏输入：函数(){ this.setData({ inputVal: ' '，input Howe d : false })；//getList(这个);}，clearInput:函数(){这个。setdata({ input val : ' ' })；//getList(这个);}，输入类型：函数(e) { //搜索数据//getList(这个，e . detail。值)；这个。setdata({ inputval : e . detail。value })；}更多搜索功能实现的精彩文章，请点击专题：javascript搜索功能汇总进行学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。