微信小程序搜索功能

最新推荐文章于 2024-07-03 19:38:04 发布

编程微刊

最新推荐文章于 2024-07-03 19:38:04 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_38822390/article/details/86494316

版权

本文介绍了如何在微信小程序中实现搜索功能。当用户在搜索框输入字符时，如果存在匹配内容，这些内容会实时显示出来。文章提供了wxml、wxss和js的相关代码示例，并且提到作者使用了全局框架WeUI。作者祈澈姑娘是一位90后前端开发者，热衷于分享技术问题和解决方案。

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

功能：在搜索界面，搜索输入的字符，如果有匹配，就会显示出来。

wxml


<view class="page">
  <view class="page__bd">
    <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="沪A6789" maxlength='10' value="{
  {inputVal}}" focus="{
  {inputShowed}}"   bindinput="inputTyping" />
          <view class="weui-icon-clear" wx:if="{
  {inputVal.length > 0}}" bindtap="clearInput">
            <icon type="clear" size="14"></icon>
          </view>
        </view>
     
      </view>
      <view class="weui-search-bar__cancel-btn" bindtap="hideInput">取消</view>
    </view>
    <view class="weui-cells searchbar-result" wx:if="{
  {inputVal.length > 0}}">
      <!-- 搜索列表 -->
      <view class="weui-cell__bd" wx:for="{
  {list}}" wx:key="key">
        <!-- 列表名称 -->
        <view class='list_name'  data-index='{
  {index}}' data-id='{
  {item.deviceId}}' 
        data-name='{
  {item.carNum}}' bindtap='btn_name'>
          <!-- 昵称 -->
          <label class='lab_name'>{
  {item.carNum}}</label>
        </view>
      </view>
    </view>   
  </view>
</view>


 <view class="item-box">
  <view class="items">
    <view wx:for="{
  {carList}}" wx:key="{
  {index}}" class="msg-item">
      <view class='msg' style="{
  {item.txtStyle}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{
  {index}}" data-car="{
  {item.carNum}}" >
       <view class='carstate' bindtap='carState' data-in