微信小程序类似于美团外卖的搜索框代码

以下是一个微信小程序类似于美团外卖的搜索框代码示例，包含搜索框、搜索历史记录和搜索结果：

<view class="search">
  <!-- 搜索框 -->
  <view class="search-box">
    <image class="search-icon" src="/images/search.png"></image>
    <input class="search-input" placeholder="请输入要搜索的内容" value="{{keyword}}" bindinput="onInput" confirm-type="search" bindconfirm="onConfirm"></input>
    <image class="clear-icon" src="/images/clear.png" bindtap="onClear"></image>
  </view>

  <!-- 历史记录 -->
  <view class="history" wx:if="{{showHistory}}">
    <view class="history-title">历史记录</view>
    <view class="history-list">
      <view class="history-item" wx:for="{{history}}" wx:key="{{index}}" bindtap="onHistoryTap">{{item}}</view>
    </view>
    <view class="history-clear" bindtap="onHistoryClear">清除历史记录</view>
  </view>

  <!-- 搜索结果 -->
  <view class="result" wx:if="{{showResult}}">
    <view class="result-title">搜索结果</view>
    <view class="result-list">
      <view class="result-item" wx:for="{{result}}" wx:key="{{index}}">{{item}}</view>
    </view>
  </view>
</view>

注释：

- `search`：搜索框容器。
- `search-box`：搜索框输入区域。
- `search-icon`：搜索框图标。
- `search-input`：搜索框输入框。
- `placeholder`：搜索框默认提示文字。
- `value`：搜索框输入的值。
- `bindinput`：搜索框输入时触发的事件。
- `confirm-type`：搜索框确认按钮的样式，设置为 `search` 显示为搜索。
- `bindconfirm`：搜索框确认搜索时触发的事件。
- `clear-icon`：搜索框清除按钮。
- `bindtap`：搜索框清除按钮点击触发的事件。
- `history`：历史记录区域。
- `history-title`：历史记录标题。
- `history-list`：历史记录列表。
- `history-item`：历史记录项。
- `wx:for`：历史记录列表循环。
- `wx:key`：历史记录列表项的唯一标识符。
- `bindtap`：历史记录项点击触发的事件。
- `history-clear`：清除历史记录按钮。
- `result`：搜索结果区域。
- `result-title`：搜索结果标题。
- `result-list`：搜索结果列表。
- `result-item`：搜索结果项。
- `wx:for`：搜索结果列表循环。
- `wx:key`：搜索结果列表项的唯一标识符。

在对应的 .js 文件中，需要定义以下函数来处理搜索事件：

Page({
  data: {
    keyword: '', // 搜索框输入的值
    showHistory: true, // 是否显示历史记录
    history: [], // 历史记录数组
    showResult: false, // 是否显示搜索结果
    result: [], // 搜索结果数组
  },

  // 输入框输入时触发的事件
  onInput: function(event) {
    this.setData({
      keyword: event.detail.value
    });
    // 获取相关搜索结果
    this.getSearchResult();
  },

  // 确认搜索时触发的事件
  onConfirm: function() {
    this.addHistory(this.data.keyword); // 添加历史记录
    this.setData({
      showHistory: false, // 隐藏历史记录
      showResult: true, // 显示搜索结果
    });
  },

  // 清除按钮点击触发的事件
  onClear: function() {
    this.setData({
      keyword: '', // 清空搜索框内容
      showHistory: true, // 显示历史记录
      showResult: false, // 隐藏搜索结果
    });
  },

  // 历史记录项点击触发的事件
  onHistoryTap: function(event) {
    this.setData({
      keyword: event.currentTarget.dataset.keyword, // 设置搜索框输入值为历史记录项内容
    });
    this.getSearchResult(); // 获取相关搜索结果
  },

  // 清除历史记录按钮点击触发的事件
  onHistoryClear: function() {
    this.setData({
      history: [], // 清空历史记录数组
    });
  },

  // 添加历史记录
  addHistory: function(keyword) {
    let history = wx.getStorageSync('history') || [];
    if (history.indexOf(keyword) === -1) {
      history.unshift(keyword); // 添加到数组开头
      wx.setStorageSync('history', history); // 存储到本地缓存
    }
  },

  // 获取相关搜索结果
  getSearchResult: function() {
    // 根据关键词获取相关搜索结果
    // 并将结果存储到 this.data.result 中
  },
})

在对应的 .wxss 文件中，需要定义以下样式来美化搜索框：

.search {
  padding: 20rpx;
}

.search-box {
  display: flex;
  align-items: center;
  border: 1rpx solid #ccc;
  border-radius: 50rpx;
  padding: 10rpx;
  margin-bottom: 20rpx;
}

.search-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  outline: none;
  border: none;
  background-color: transparent;
}

.clear-icon {
  width: 30rpx;
  height: 30rpx;
}

.history {
  margin-bottom: 20rpx;
}

.history-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.history-list {
  display: flex;
  flex-wrap: wrap;
}

.history-item {
  border: 1rpx solid #ccc;
  border-radius: 50rpx;
  padding: 10rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  font-size: 26rpx;
}

.history-clear {
  color: #999;
  text-align: center;
}

.result-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.result-list {
  display: flex;
  flex-wrap: wrap;
}

.result-item {
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}