uni app 如何使用input-autocomplete

在uni-app中，可以使用 `uni-input` 组件结合 `uni-popup` 组件来实现自动补全的功能。具体步骤如下：

1. 安装 `luch-request` 插件，用于发送请求获取数据。

npm install luch-request --save

2. 在需要使用自动补全的页面中引入 `uni-input` 和 `uni-popup` 组件。

<template>
  <view>
    <uni-input v-model="searchText" @focus="showPopup = true" placeholder="请输入搜索关键字"></uni-input>
    <uni-popup v-model="showPopup" :position="position" style="width: 90%;max-height: 200rpx;">
      <view v-if="searchText && searchList.length">
        <view v-for="(item, index) in searchList" :key="index" class="popup-item" @tap="selectItem(item)">
          {{item.name}}
        </view>
      </view>
      <view v-else class="popup-item">
        暂无数据
      </view>
    </uni-popup>
  </view>
</template>

3. 在 `script` 中定义相关变量和方法。

import request from '@/common/request.js'

export default {
  data() {
    return {
      searchText: '', // 搜索文本
      showPopup: false, // 是否显示下拉框
      position: 'bottom', // 显示位置（可选值：top、bottom、center）
      searchList: [] // 搜索结果列表
    }
  },
  methods: {
    // 发送请求获取搜索结果
    async getSearchList() {
      const res = await request.get('/search', {keywords: this.searchText})
      if (res.code === 200) {
        this.searchList = res.data
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    },
    // 选中某一项
    selectItem(item) {
      this.searchText = item.name
      this.showPopup = false
    }
  },
  watch: {
    // 监听搜索文本变化
    searchText(newVal) {
      if (newVal) {
        this.getSearchList()
      } else {
        this.searchList = []
      }
    }
  }
}

说明：
- 在 `uni-input` 组件中使用了 `@focus` 事件，当输入框获取焦点时，显示下拉框。
- 在 `uni-popup` 组件中使用了 `v-model` 实现双向绑定，控制下拉框的显示和隐藏。
- 在下拉框中使用了 `v-for` 渲染搜索结果列表，使用 `@tap` 监听选中某一项的事件。
- 在 `watch` 中监听搜索文本变化，当文本不为空时发送请求获取搜索结果，为空时清空搜索结果列表。