（组件）模拟百度输入框下拉自动补全element

<template>
  <div>
    <el-form ref="Ref" :model="Form" :rules="rulesForm" :disabled="zjdisabled" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="mzh" label="门诊号：">
            <el-autocomplete v-model="Form.mzh" :fetch-suggestions="(query, cb) => querySearch(query, cb, 'mzh')"
              clearable :trigger-on-focus="false" class="inline-input w-50" placeholder="请选择门诊号"
              @select="(value) => handleSelect(value, 'mzh')" @input="(value) => handleChange(value, 'mzh')" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="zyh" label="住院号：">
            <el-autocomplete v-model="Form.zyh" :fetch-suggestions="(query, cb) => querySearch(query, cb, 'zyh')"
              clearable :trigger-on-focus="false" class="inline-input w-50" placeholder="请输入住院号"
              @input="(value) => handleChange(value, 'zyh')" @select="(value) => handleSelect(value, 'zyh')" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="xm" label="姓名：">
            <el-autocomplete v-model="Form.xm" :fetch-suggestions="(query, cb) => querySearch(query, cb, 'xm')"
              clearable :trigger-on-focus="false" class="inline-input w-50" placeholder="请输入姓名"
              @input="(value) => handleChange(value, 'xm')" @select="(value) => handleSelect(value, 'xm')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider style="margin: 10px" />
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const data = reactive({
  Form: {
    mzh: "",
    zyh: "",
    xm: "",
  },
  rulesForm: {
    mzh: [{ required: true, message: "门诊号不可为空", trigger: "blur" }],
  },
});
const { Form, rulesForm } = toRefs(data);
const emit = defineEmits(["childChange"]);
const handleSelect = async (select, flag) => {
  if (!select.value) return
  const { data: res } = await proxy.$postRequest("", {
    flag: flag,
    val: select.value,
  });
  if (res.status == 200) {
    const { mzh, zyh, xm } = res.data;
    Form.value.zyh = zyh;
    Form.value.xm = xm;
    Form.value.mzh = mzh;
  } else {
    proxy.$message.error(res.msg);
  }
  // 必须经过defineEmits声明，不然方法无效！
  emit("childChange", Form.value);
};
watch(
  props,
  (val) => {
    Form.value = val.data;
  },
  { deep: true }
);
const props = defineProps({
  data: {
    type: Object,
    default: "",
  },
  zjdisabled: {
    type: Boolean,
    default: false,
  },
});
const handleChange = (value, flag) => {
  if (flag == 'mzh') {
    Form.value.zyh = '';
    Form.value.xm = '';
  }
  if (flag == 'zyh') {
    Form.value.mzh = '';
    Form.value.xm = '';
  }
  if (flag == 'xm') {
    Form.value.mzh = '';
    Form.value.zyh = '';
  }
  // emit("childChange", Form.value);
};
const zjdisabled = props.zjdisabled;
//根据门诊号-住院号-姓名查找患者列表
const querySearch = async (queryString, cb, flag) => {
  if (!queryString) return;
  const { data: res } = await proxy.$postRequest("", {
    flag: flag,
    val: queryString,
  });
  if (res.status == 200) {
    let aar = [];
    res.data.forEach((item) => {
      aar.push({ value: item });
    });
    setTimeout(() => {
      cb(aar);
    }, 500)
  } else {
    proxy.$message.error(res.msg);
  }
};
</script>

<style  scoped>
</style>