微信小程序-搜索框

一、功能介绍：

根据输入框内输入的内容搜索到自己想要的已有的结果。

二、使用方法：

在输入框内输入想要查询的内容，下方会出现对应的搜索内容，点击下方搜索，就会得到想要搜索的已有的结果。

三、效果展示：

四、示例代码：

WXML代码

<!-- 搜索框 -->

<view class="search__top">

<form class='search__form' bindsubmit="searchSubmit">

<view class='search__box'>

<icon class='search__icon' type="search" size="13" color="#888" ></icon>

<input class="search__input" value="{
  {search.searchValue}}" placeholder="输入搜索内容" bindfocus="focusSearch" bindinput="searchActiveChangeinput" auto-focus="true" name="teamSearchKeyWords" />

<button wx:if="{
  {search.showClearBtn}}" catchtap="searchActiveChangeclear" form-type="reset" style="background:none;position:absolute;border:none;right:0;top:0;bottom:0;width:80rpx;">

<icon type="clear" size="19" color="#aaa" style&#