AutoComplete 自动完成

输入框自动完成功能。

代码演示

list suggestions when activated

list suggestions on input

自定义模板

远程搜索

<template>
  <div>
    <v-formly-v3
      ref="form"
      v-model="formData"
      :meta="meta"
      :layout="'horizontal'"
    >
      <template v-slot:auto2_suffix>
        <el-icon class="el-input__icon" @click="handleAuto2SuffixIconClick">
          <edit />
        </el-icon>
      </template>
      <template v-slot:auto2_default="{ item }">
        <div class="value">{{ item.value }}</div>
        <span class="link">{{ item.link }}</span>
      </template>
    </v-formly-v3>
    <div class="btns">
      <el-button type="danger" @click="clear"> 重置 </el-button>
      <el-button type="primary" @click="submit"> 提交 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRaw, unref } from "vue";
import type VFormlyV3 from "@/element-plus/ElFormly.vue";

const form = ref<null | InstanceType<typeof VFormlyV3>>(null);

interface RestaurantItem {
  value: string;
  link: string;
}
const restaurants = ref<RestaurantItem[]>([]);
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};
const loadAll = () => {
  return [
    { value: "vue", link: "https://github.com/vuejs/vue" },
    { value: "element", link: "https://github.com/ElemeFE/element" },
    { value: "cooking", link: "https://github.com/ElemeFE/cooking" },
    { value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
    { value: "vuex", link: "https://github.com/vuejs/vuex" },
    { value: "vue-router", link: "https://github.com/vuejs/vue-router" },
    { value: "babel", link: "https://github.com/babel/babel" },
  ];
};
const querySearchAutoAndAuto1 = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value;
  // call callback function to return suggestions
  cb(results);
};

interface LinkItem {
  value: string;
  link: string;
}
const links = ref<LinkItem[]>([]);
const querySearchAuto2 = (queryString: string, cb: any) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value;
  // call callback function to return suggestion objects
  cb(results);
};
const handleAuto2SuffixIconClick = (ev: Event) => {
  console.log(ev);
};

let timeout: any;
const querySearchAsyncAuto3 = (queryString: string, cb: (arg: any) => void) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value;

  clearTimeout(timeout);
  timeout = setTimeout(() => {
    cb(results);
  }, 3000 * Math.random());
};
onMounted(() => {
  restaurants.value = loadAll();
  links.value = loadAll();
});
const meta = {
  type: "object",
  properties: {
    auto: {
      type: "string",
      title: "list suggestions when activated",
      ui: {
        component: "autocomplete",
        placeholder: "Please Input",
        clearable: true,
        fetchSuggestions: querySearchAutoAndAuto1,
        select: function (value: string) {
          console.log("onSelect", value);
        },
      },
    },
    auto1: {
      type: "string",
      title: "list suggestions on input",
      ui: {
        component: "autocomplete",
        placeholder: "Please Input",
        clearable: true,
        triggerOnFocus: false,
        fetchSuggestions: querySearchAutoAndAuto1,
        select: function (value: string) {
          console.log("onSelect", value);
        },
      },
    },
    auto2: {
      type: "string",
      title: "自定义模板",
      ui: {
        component: "autocomplete",
        placeholder: "Please Input",
        slotNameOfDefault: "auto2_default",
        slotNameOfSuffix: "auto2_suffix",
        fetchSuggestions: querySearchAuto2,
        select: function (value: string) {
          console.log("onSelect", value);
        },
      },
    },
    auto3: {
      type: "string",
      title: "远程搜索",
      ui: {
        component: "autocomplete",
        placeholder: "Please Input",
        fetchSuggestions: querySearchAsyncAuto3,
        select: function (value: string) {
          console.log("onSelect", value);
        },
      },
    },
  },
  required: [],
};

let formData: any = ref({});

function clear() {
  formData.value = null;
}

async function submit() {
  let valid = await form.value!.validate();
  if (valid) {
    console.log(toRaw(unref(formData)));
  }
}
</script>

<style scoped></style>

显示复制复制

API

我们只列出属性中不一致的或新添加的，一致的地方请参考 具体组件库 文档

meta 属性

成员	说明	类型	默认值
:readOnly	禁用状态	boolean	-

meta.ui 属性 (antdv)

成员	说明	类型	默认值
:slotNameOfDefault	自定义输入框，slot 名称	string	-
:slotNameOfOption	通过 option 插槽，自定义节点，slot 名称	string	-
@change	选中 option，或 input 的 value 变化时，调用此函数	function(value)	-
@search	搜索补全项的时候调用	function(value)	-
@select	被选中时调用，参数为选中项的 value 值	function(value, option)	-

meta.ui 属性 (element)

成员	说明	类型	默认值
:slotNameOfDefault	自定义输入建议的内容，slot 名称	string	-
:slotNameOfPrefix	输入框头部内容，slot 名称	string	-
:slotNameOfSuffix	输入框尾部内容，slot 名称	string	-
:slotNameOfPrepend	输入框前置内容，在 prefix 之前，slot 名称	string	-
:slotNameOfAppend	输入框后置内容，在 suffix 之后，slot 名称	string	-
@change	在 Input 值改变时触发	function(value)	-
@select	点击选中建议项时触发	function(item)	-