微信小程序-搜索框

最新推荐文章于 2024-08-06 09:03:34 发布

浮名半生

最新推荐文章于 2024-08-06 09:03:34 发布

阅读量4k

点赞数 4

分类专栏：小程序组件

本文链接：https://blog.csdn.net/weixin_44022446/article/details/88094037

版权

这篇博客介绍了微信小程序中如何实现搜索功能。用户在输入框输入内容后，程序会显示匹配的搜索结果。搜索功能的实现主要依靠向服务器发送请求，由服务器处理数据库操作。文中包含WXML、WXSS和JS的示例代码。

摘要由CSDN通过智能技术生成

一、功能介绍：

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

二、使用方法：

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

三、效果展示：

在这里插入图片描述

四、示例代码：

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="position:absolute;right:15rpx;top:10rpx;z-index:3;"></icon>

</button>

</view>

</form>

</view>

<!-- 搜索框输入内容是下方变化 -->

<view class="panel" wx:if