自动补全输入框

根据输入内容提供对应的输入建议

Autodcomplete 组件提供输入建议。 fetch-suggestions 属性是返回建议输入的方法。 在此示例中， querySearch(queryString, cb) 返回建议通过 cb(data) 自动完成建议。

Autocomplete 自动补全输入框 - 图1

  1. <template>
  2.   <el-row class="demo-autocomplete text-center">
  3.     <el-col :span="12">
  4.       <div class="sub-title my-2 text-sm text-gray-600">
  5.         list suggestions when activated
  6.       </div>
  7.       <el-autocomplete
  8.         v-model="state1"
  9.         :fetch-suggestions="querySearch"
  10.         clearable
  11.         class="inline-input w-50"
  12.         placeholder="Please Input"
  13.         @select="handleSelect"
  14.       />
  15.     </el-col>
  16.     <el-col :span="12">
  17.       <div class="sub-title my-2 text-sm text-gray-600">
  18.         list suggestions on input
  19.       </div>
  20.       <el-autocomplete
  21.         v-model="state2"
  22.         :fetch-suggestions="querySearch"
  23.         :trigger-on-focus="false"
  24.         clearable
  25.         class="inline-input w-50"
  26.         placeholder="Please Input"
  27.         @select="handleSelect"
  28.       />
  29.     </el-col>
  30.   </el-row>
  31. </template>
  33. <script lang="ts" setup>
  34. import { onMounted, ref } from 'vue'
  36. interface RestaurantItem {
  37.   value: string
  38.   link: string
  39. }
  41. const state1 = ref('')
  42. const state2 = ref('')
  44. const restaurants = ref<RestaurantItem[]>([])
  45. const querySearch = (queryString: string, cb: any) => {
  46.   const results = queryString
  47.     ? restaurants.value.filter(createFilter(queryString))
  48.     : restaurants.value
  49.   // call callback function to return suggestions
  50.   cb(results)
  51. }
  52. const createFilter = (queryString: string) => {
  53.   return (restaurant: RestaurantItem) => {
  54.     return (
  55.       restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
  56.     )
  57.   }
  58. }
  59. const loadAll = () => {
  60.   return [
  61.     { value: 'vue', link: 'https://github.com/vuejs/vue' },
  62.     { value: 'element', link: 'https://github.com/ElemeFE/element' },
  63.     { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
  64.     { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
  65.     { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
  66.     { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
  67.     { value: 'babel', link: 'https://github.com/babel/babel' },
  68.   ]
  69. }
  71. const handleSelect = (item: RestaurantItem) => {
  72.   console.log(item)
  73. }
  75. onMounted(() => {
  76.   restaurants.value = loadAll()
  77. })
  78. </script>

自定义模板

自定义如何显示输入建议。

使用 scoped slot 自定义输入建议。 在这个范围中，你可以使用 item 键来访问当前输入建议对象。

Autocomplete 自动补全输入框 - 图2

  1. <template>
  2.   <el-autocomplete
  3.     v-model="state"
  4.     :fetch-suggestions="querySearch"
  5.     popper-class="my-autocomplete"
  6.     placeholder="Please input"
  7.     @select="handleSelect"
  8.   >
  9.     <template #suffix>
  10.       <el-icon class="el-input__icon" @click="handleIconClick">
  11.         <edit />
  12.       </el-icon>
  13.     </template>
  14.     <template #default="{ item }">
  15.       <div class="value">{{ item.value }}</div>
  16.       <span class="link">{{ item.link }}</span>
  17.     </template>
  18.   </el-autocomplete>
  19. </template>
  21. <script lang="ts" setup>
  22. import { onMounted, ref } from 'vue'
  23. import { Edit } from '@element-plus/icons-vue'
  25. interface LinkItem {
  26.   value: string
  27.   link: string
  28. }
  30. const state = ref('')
  31. const links = ref<LinkItem[]>([])
  33. const querySearch = (queryString: string, cb) => {
  34.   const results = queryString
  35.     ? links.value.filter(createFilter(queryString))
  36.     : links.value
  37.   // call callback function to return suggestion objects
  38.   cb(results)
  39. }
  40. const createFilter = (queryString) => {
  41.   return (restaurant) => {
  42.     return (
  43.       restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
  44.     )
  45.   }
  46. }
  47. const loadAll = () => {
  48.   return [
  49.     { value: 'vue', link: 'https://github.com/vuejs/vue' },
  50.     { value: 'element', link: 'https://github.com/ElemeFE/element' },
  51.     { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
  52.     { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
  53.     { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
  54.     { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
  55.     { value: 'babel', link: 'https://github.com/babel/babel' },
  56.   ]
  57. }
  58. const handleSelect = (item: LinkItem) => {
  59.   console.log(item)
  60. }
  62. const handleIconClick = (ev: Event) => {
  63.   console.log(ev)
  64. }
  66. onMounted(() => {
  67.   links.value = loadAll()
  68. })
  69. </script>
  71. <style>
  72. .my-autocomplete li {
  73.   line-height: normal;
  74.   padding: 7px;
  75. }
  76. .my-autocomplete li .name {
  77.   text-overflow: ellipsis;
  78.   overflow: hidden;
  79. }
  80. .my-autocomplete li .addr {
  81.   font-size: 12px;
  82.   color: #b4b4b4;
  83. }
  84. .my-autocomplete li .highlighted .addr {
  85.   color: #ddd;
  86. }
  87. </style>

远程搜索

从服务端搜索数据

Autocomplete 自动补全输入框 - 图3

  1. <template>
  2.   <el-autocomplete
  3.     v-model="state"
  4.     :fetch-suggestions="querySearchAsync"
  5.     placeholder="Please input"
  6.     @select="handleSelect"
  7.   />
  8. </template>
  10. <script lang="ts" setup>
  11. import { onMounted, ref } from 'vue'
  13. const state = ref('')
  15. interface LinkItem {
  16.   value: string
  17.   link: string
  18. }
  20. const links = ref<LinkItem[]>([])
  22. const loadAll = () => {
  23.   return [
  24.     { value: 'vue', link: 'https://github.com/vuejs/vue' },
  25.     { value: 'element', link: 'https://github.com/ElemeFE/element' },
  26.     { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
  27.     { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
  28.     { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
  29.     { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
  30.     { value: 'babel', link: 'https://github.com/babel/babel' },
  31.   ]
  32. }
  34. let timeout: NodeJS.Timeout
  35. const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  36.   const results = queryString
  37.     ? links.value.filter(createFilter(queryString))
  38.     : links.value
  40.   clearTimeout(timeout)
  41.   timeout = setTimeout(() => {
  42.     cb(results)
  43.   }, 3000 * Math.random())
  44. }
  45. const createFilter = (queryString: string) => {
  46.   return (restaurant: LinkItem) => {
  47.     return (
  48.       restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
  49.     )
  50.   }
  51. }
  53. const handleSelect = (item: LinkItem) => {
  54.   console.log(item)
  55. }
  57. onMounted(() => {
  58.   links.value = loadAll()
  59. })
  60. </script>

Autocomplete 属性

参数属性详情类型可选值默认值
placeholder占位文本string——
clearable是否可清空boolean—false
disabled是否禁用boolean—false
value-key输入建议对象中用于显示的键名string—value
model-value / v-model选中项绑定值string——
debounce获取输入建议的防抖延时number—300
placement菜单弹出位置stringtop / top-start / top-end / bottom / bottom-start / bottom-endbottom-start
fetch-suggestions获取输入建议的方法， 仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它Function(queryString, callback)——
popper-class下拉列表的类名string——
trigger-on-focus是否在输入框 focus 时显示建议列表boolean—true
name等价于原生 input name 属性string——
select-when-unmatched在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件boolean—false
label标签文本string——
hide-loading是否隐藏远程加载时的加载图标boolean—false
popper-append-to-body(deprecated)是否将下拉列表插入至 body 元素。 在下拉列表的定位出现问题时，可将该属性设置为 falseboolean—false
teleported是否将下拉列表插入至 body 元素booleantrue / falsetrue
highlight-first-item是否默认突出显示远程搜索建议中的第一项boolean—false
fit-input-width下拉框是否与输入框同宽boolean—false

Autocomplete 插槽

插槽名详情
—自定义输入建议的内容。 自定义标签，参数为
prefix输入框占位文本
suffix输入框尾部内容
prepend输入框前置内容
append输入框后置内容

Autocomplete 事件

事件名描述说明参数
select点击选中建议项时触发选中的建议项
change在 Input 值改变时触发(value: string | number)

Autocomplete 方法

方法详情参数
focus使 input 获取焦点—
blur使 input 失去焦点—

源代码

组件 Autocomplete 自动补全输入框 - 图4 • 文档 Autocomplete 自动补全输入框 - 图5

贡献者

Autocomplete 自动补全输入框 - 图6 三咲智子

Autocomplete 自动补全输入框 - 图7 云游君

Autocomplete 自动补全输入框 - 图8 JeremyWuuuuu

Autocomplete 自动补全输入框 - 图9 kooriookami

Autocomplete 自动补全输入框 - 图10 qiang

Autocomplete 自动补全输入框 - 图11 bqy_fe

Autocomplete 自动补全输入框 - 图12 opengraphica

Autocomplete 自动补全输入框 - 图13 0song

Autocomplete 自动补全输入框 - 图14 Stephen.K

Autocomplete 自动补全输入框 - 图15 Xc

Autocomplete 自动补全输入框 - 图16 Delyan Haralanov

Autocomplete 自动补全输入框 - 图17 Carter Li

Autocomplete 自动补全输入框 - 图18 blackie

Autocomplete 自动补全输入框 - 图19 iamkun

Autocomplete 自动补全输入框 - 图20 btea

Autocomplete 自动补全输入框 - 图21 Aex

Autocomplete 自动补全输入框 - 图22 on the field of hope

Autocomplete 自动补全输入框 - 图23 Simona

Autocomplete 自动补全输入框 - 图24 Hades-li

Autocomplete 自动补全输入框 - 图25 zz