uniapp文本补全

uniApp文本补全（也称为自动完成或输入提示）是一种常见的用户界面功能，它会在用户开始键入文本时，从预设的选项列表中提供动态建议。在uniApp（基于Vue.js的跨平台应用框架）中，可以利用其内置的组件`<u-input>`结合自定义的`@search-change`或`@search`事件监听器来实现文本框的自动补全。

通常的做法是：

1. 创建一个包含关键词和对应值的数据数组，例如：`const options = [{ value: '苹果', label: 'Apple' }, { value: '香蕉', label: 'Banana' }]`。
2. 当用户在文本框内输入文字时，触发搜索事件，通过筛选数组获取匹配的部分作为建议展示。
3. 使用`v-model`绑定用户输入，监听变化并在`methods`中编写处理搜索逻辑的函数。

<u-input v-model="inputValue" placeholder="请输入搜索内容" @search="handleSearch"></u-input>

data() {
  return {
    inputValue: '',
    options: [...], // 初始化数据数组
  };
},
methods: {
  handleSearch(query) {
    this.options.filter(item => item.label.includes(query)).forEach(option => {
      console.log('显示选项:', option.label);
    });
  },
}