微信小程序input输入关键词后选择

<view class="container">
    <input type="text" placeholder="请输入关键词搜索..." bindinput="onInput" value="{{inputValue}}" bindfocus="showPopup"/>
    <!-- 弹出层 -->
    <view wx:if="{{showPopup}}"  position="bottom"  bind:close="onClosePopup">
      <scroll-view scroll-y style="max-height: 300px;">
        <view class="popup-content">
          <!-- 动态渲染过滤后的选项 -->
          <view wx:for="{{filteredOptions}}"  wx:key="index"  class="option-item" bindtap="selectOption"  data-value="{{item}}">{{item}}</view>
          <!-- 无结果提示 -->
          <view wx:if="{{filteredOptions.length === 0}}" class="no-result">
            暂无匹配结果
          </view>
        </view>
      </scroll-view>
    </view>
</view>

.container {
  padding:100px 20px;
}

.popup-content {
  padding: 20px;
}

.option-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.option-item:hover {
  background-color: #f5f5f5;
}

.no-result {
  padding: 15px;
  text-align: center;
  color: #999;
}

Page({
  data: {
    inputValue: '', // 输入框的值
    showPopup: false, // 是否显示弹出层
    allOptions: ['苹果', '香蕉', '橙子', '西瓜', '草莓', '蓝莓'], // 所有选项
    filteredOptions: [] // 过滤后的选项
  },

  onLoad() {
    app.editTabBar();
    // 初始化时显示所有选项
    this.setData({
      filteredOptions: this.data.allOptions
    });
  },

  // 输入事件
  onInput(e) {
    const value = e.detail.value;
    this.setData({
      inputValue: value
    });
    this.filterOptions(value);
  },

  // 过滤选项
  filterOptions(keyword) {
    const filtered = this.data.allOptions.filter(item => 
      item.includes(keyword)
    );
    this.setData({
      filteredOptions: filtered
    });
  },

  // 显示弹出层
  showPopup() {
    this.setData({
      showPopup: true,
      filteredOptions: this.data.allOptions // 显示所有选项
    });
  },

  // 关闭弹出层
  onClosePopup() {
    this.setData({
      showPopup: false
    });
  },

  // 选择选项
  selectOption(e) {
    const selectedValue = e.currentTarget.dataset.value;
    this.setData({
      inputValue: selectedValue,
      showPopup: false
    });
  }
});