小程序實現(xiàn)搜索框功能

第小程序實現(xiàn)搜索框功能本文實例為大家分享了小程序實現(xiàn)搜索框功能的具體代碼，供大家參考，具體內容如下

實現(xiàn)效果圖：

xxx.wxml

!--搜索框--

view

view

!--點擊之后，出現(xiàn)input框--

view

icontype="search"size="14"/icon

inputtype="text"placeholder="搜索"value="{{inputVal}}"focus="{{inputShowed}}"bindinput="inputTyping"/

!--輸入款字數(shù)大于0，則顯示清除按鈕--

viewwx:if="{{inputVal.length0}}"bindtap="clearInput"

icontype="clear"size="14"/icon

/view

/view

!--沒點擊之前，只是一些文字和圖標--

labelhidden="{{inputShowed}}"bindtap="showInput"

icontype="search"size="14"/icon

view搜索/view

/label

/view

!--動態(tài)出現(xiàn)的“取消”鍵--

viewhidden="{{!inputShowed}}"bindtap="hideInput"取消/view

/view

xxx.wxss

.weui-search-bar{

position:relative;

padding:8px10px;

display:-webkit-box;

display:-webkit-flex;

display:flex;

box-sizing:border-box;

background-color:#EFEFF4;

border-top:1rpxsolid#D7D6DC;

border-bottom:1rpxsolid#D7D6DC;

.weui-icon-search{

margin-right:8px;

font-size:inherit;

.weui-icon-search_in-box{

position:absolute;

left:10px;

top:7px;

.weui-search-bar__text{

display:inline-block;

font-size:14px;

vertical-align:middle;

.weui-search-bar__form{

position:relative;

-webkit-box-flex:1;

-webkit-flex:auto;

flex:auto;

border-radius:5px;

background:#FFFFFF;

border:1rpxsolid#E6E6EA;

.weui-search-bar__box{

position:relative;

padding-left:30px;

padding-right:30px;

width:100%;

box-sizing:border-box;

z-index:1;

.weui-search-bar__input{

height:28px;

line-height:28px;

font-size:14px;

.weui-icon-clear{

position:absolute;

top:0;

right:0;

padding:7px8px;

font-size:0;

.weui-search-bar__label{

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

z-index:2;

border-radius:3px;

text-align:center;

color:#9B9B9B;

background:#FFFFFF;

line-height:28px;

.weui-search-bar__cancel-btn{

margin-left:10px;

line-height:28px;

color:#09BB07;

white-space:nowrap;

font-size:30rpx;

}

xxx.js

showInput:function(){

this.setData({

inputShowed:true

hideInput:function(){

this.setData({

inputVal:"",

inputShowed:false

//getList(this);

clearInput:function(){

this.setData({

inputVal:""

//getList(this);

inputTyping:function(e){

//搜索數(shù)據(jù)

//getList(this,e.detail.value);

this