Input输入框远程搜索

实现效果

el-autocomplete

VUE3代码

参考代码

<template>
  <div class="elementDemo05">
    <el-form
      ref="dataRef"
      :inline="true"
      :model="stateData.domain"
      label-width="160px"
      size="default"
      style="width: 75%"
    >
      <el-form-item label="远程搜索">
        <el-autocomplete
          v-model="stateData.domain.name"
          :fetch-suggestions="
            (queryString, callback) => queryAutocompleteSearchAsync(
              queryString,
              callback,
              stateData.domain
            )
          "
          placeholder="请输入"
          @select="handleAutocompleteSelect"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive,onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

onMounted(() => {
  console.log("加载数据......");
})

// 响应式数据
const stateData = reactive({
  domain: {},
});

// 数据
const loadDataResults = (params) =>{
  return [
    { "id": 1, "code": "ABCD", "name": "听音乐", "value": "ABCD", }, 
    { "id": 2, "code": "A1234", "name": "看电影", "value": "A1234",}, 
    { "id": 3, "code": "B2345", "name": "绘画", "value": "B2345", }, 
    { "id": 4, "code": "C3456", "name": "写小说", "value": "C3456", },
    { "id": 5, 	"code": "D4567", "name": "看书", "value": "D4567", }
  ];
}

// 匹配
const queryAutocompleteSearchAsync = (queryString, cb, domain) => {
  console.log("输入内容：", queryString);
  // 列表内容
  let results = [{ value: "vue2" }, { value: "vue3" }];
  results = loadDataResults(domain);
  console.log("列表内容：", results);
  cb(results);
};

// 已选择
const handleAutocompleteSelect = (item) => {
  console.log(item);
  stateData.domain.id = item.id;
};

// 执行查询
const onQuery = () => {
  ElMessage({
    message: "选择数据：" + stateData.domain.id + "->" + stateData.domain.name,
    grouping: true,
    type: "success",
  });
};
</script>

<style lang="scss">
</style>

地址：https://element-plus.gitee.io/zh-CN/component/input.html#%E8%BF%9C%E7%A8%8B%E6%90%9C%E7%B4%A2