用微信小程序写一个带下拉菜单的模糊搜索

当然可以！下面是一个简单的示例代码，展示了如何在微信小程序中实现带有下拉菜单的模糊搜索功能：

1. 在小程序的 wxml 文件中添加以下代码：

<view class="container">
  <input class="search-input" bindinput="onInput" placeholder="请输入搜索关键词" />
  <view class="dropdown" hidden="{{!showDropdown}}">
    <view class="dropdown-item" wx:for="{{searchResult}}" wx:key="{{index}}" bindtap="selectItem">{{item}}</view>
  </view>
</view>

2. 在小程序的 wxss 文件中添加以下样式：

.container {
  padding: 20rpx;
}

.search-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ccc;
  border-radius: 4rpx;
  padding: 0 20rpx;
}

.dropdown {
  position: absolute;
  top: 80rpx;
  left: 0;
  width: 100%;
}

.dropdown-item {
  padding: 20rpx;
  background-color: #f5f5f5;
  border-bottom: 1rpx solid #ccc;
}

3. 在小程序的 js 文件中添加以下代码：

Page({
  data: {
    showDropdown: false, // 控制下拉菜单的显示与隐藏
    searchResult: [], // 搜索结果列表
  },

  onInput(e) {
    const keyword = e.detail.value; // 获取输入框的值
    // 在这里进行模糊搜索逻辑，将搜索结果保存到 this.data.searchResult 中
    // 这里只是一个简单的示例，搜索结果直接使用一个固定的数组
    const searchResult = ['苹果', '香蕉', '橙子', '草莓', '葡萄'].filter(item => item.includes(keyword));
    this.setData({
      showDropdown: true,
      searchResult,
    });
  },

  selectItem(e) {
    const selectedItem = e.currentTarget.dataset.item; // 获取选中的项
    // 在这里可以进行选中项的处理操作，比如跳转到详情页等
    console.log('选中项:', selectedItem);
    this.setData({
      showDropdown: false,
    });
  },
});

这样，就实现了一个简单的带下拉菜单的模糊搜索功能。你可以根据实际需求进行进一步的样式和逻辑调整。希望对你有帮助！