AutoComplete 自动完成

概述

输入框自动完成功能。

代码示例

AutoComplete 自动完成 - 图1

基础用法

基本用法,通过 data 设置自动完成的数据源。

  1. <template>
  2. <AutoComplete
  3. v-model="value1"
  4. :data="data1"
  5. @on-search="handleSearch1"
  6. placeholder="input here"
  7. style="width:200px"></AutoComplete>
  8. </template>
  9. <script>
  10. export default {
  11. data () {
  12. return {
  13. value1: '',
  14. data1: []
  15. }
  16. },
  17. methods: {
  18. handleSearch1 (value) {
  19. this.data1 = !value ? [] : [
  20. value,
  21. value + value,
  22. value + value + value
  23. ];
  24. }
  25. }
  26. }
  27. </script>

AutoComplete 自动完成 - 图2

自定义选项

除了使用 data,还可以直接传入 Option 组件作为 slot 使用,这样可以自定义显示效果。

  1. <template>
  2. <AutoComplete
  3. v-model="value2"
  4. @on-search="handleSearch2"
  5. placeholder="input here"
  6. style="width:200px">
  7. <Option v-for="item in data2" :value="item" :key="item">{{ item }}</Option>
  8. </AutoComplete>
  9. </template>
  10. <script>
  11. export default {
  12. data () {
  13. return {
  14. value2: '',
  15. data2: []
  16. }
  17. },
  18. methods: {
  19. handleSearch2 (value) {
  20. this.data2 = !value || value.indexOf('@') >= 0 ? [] : [
  21. value + '@qq.com',
  22. value + '@sina.com',
  23. value + '@163.com'
  24. ];
  25. }
  26. }
  27. }
  28. </script>

AutoComplete 自动完成 - 图3

不区分大小写

不区分大小写的 AutoComplete,及过滤的用法。

  1. <template>
  2. <AutoComplete
  3. v-model="value3"
  4. :data="data3"
  5. :filter-method="filterMethod"
  6. placeholder="input here"
  7. style="width:200px">
  8. </AutoComplete>
  9. </template>
  10. <script>
  11. export default {
  12. data () {
  13. return {
  14. value3: '',
  15. data3: ['Steve Jobs', 'Stephen Gary Wozniak', 'Jonathan Paul Ive']
  16. }
  17. },
  18. methods: {
  19. filterMethod (value, option) {
  20. return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
  21. }
  22. }
  23. }
  24. </script>

AutoComplete 自动完成 - 图4

查询模式

完全自定义 Option,显示复杂的布局。

  1. <template>
  2. <AutoComplete
  3. v-model="value4"
  4. icon="ios-search"
  5. placeholder="input here"
  6. style="width:300px">
  7. <div class="demo-auto-complete-item" v-for="item in data4">
  8. <div class="demo-auto-complete-group">
  9. <span>{{ item.title }}</span>
  10. <a href="https://www.google.com/search?q=iView" target="_blank">更多</a>
  11. </div>
  12. <Option v-for="option in item.children" :value="option.title" :key="option.title">
  13. <span class="demo-auto-complete-title">{{ option.title }}</span>
  14. <span class="demo-auto-complete-count">{{ option.count }} 人关注</span>
  15. </Option>
  16. </div>
  17. <a href="https://www.google.com/search?q=iView" target="_blank" class="demo-auto-complete-more">查看所有结果</a>
  18. </AutoComplete>
  19. </template>
  20. <script>
  21. export default {
  22. data () {
  23. return {
  24. value4: '',
  25. data4: [
  26. {
  27. title: '话题',
  28. children: [
  29. {
  30. title: 'iView',
  31. count: 10000,
  32. },
  33. {
  34. title: 'iView UI',
  35. count: 10600,
  36. }
  37. ]
  38. },
  39. {
  40. title: '问题',
  41. children: [
  42. {
  43. title: 'iView UI 有多好',
  44. count: 60100,
  45. },
  46. {
  47. title: 'iView 是啥',
  48. count: 30010,
  49. }
  50. ]
  51. },
  52. {
  53. title: '文章',
  54. children: [
  55. {
  56. title: 'iView 是一个设计语言',
  57. count: 100000,
  58. }
  59. ]
  60. }
  61. ]
  62. }
  63. }
  64. }
  65. </script>
  66. <style>
  67. .demo-auto-complete-item{
  68. padding: 4px 0;
  69. border-bottom: 1px solid #F6F6F6;
  70. }
  71. .demo-auto-complete-group{
  72. font-size: 12px;
  73. padding: 4px 6px;
  74. }
  75. .demo-auto-complete-group span{
  76. color: #666;
  77. font-weight: bold;
  78. }
  79. .demo-auto-complete-group a{
  80. float: right;
  81. }
  82. .demo-auto-complete-count{
  83. float: right;
  84. color: #999;
  85. }
  86. .demo-auto-complete-more{
  87. display: block;
  88. margin: 0 auto;
  89. padding: 4px;
  90. text-align: center;
  91. font-size: 12px;
  92. }
  93. </style>

API

AutoComplete props

属性说明类型默认值
value绑定的值,可使用 v-model 双向绑定String | Number-
data自动完成的数据源Array[]
clearable是否可以清空选项Booleanfalse
disabled是否禁用Booleanfalse
placeholder占位文本String-
size输入框尺寸,可选值为 largesmalldefault 或者不设置String-
icon输入框尾部图标String-
filter-method是否根据输入项进行筛选。当其为一个函数时,会接收 valueoption 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 falseFunction | Booleanfalse
placement弹窗的展开方向,可选值为 bottomtop,2.12.0 版本开始支持自动识别Stringbottom
transfer是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果Booleanfalse
element-id给表单元素设置 id,详见 Form 用法。String-

AutoComplete events

事件名说明返回值
on-change选中 option,或 input 的 value 变化时,调用此函数value
on-select被选中时调用,参数为选中项的 value 值value
on-search搜索补全项的时候调用query
on-focus聚焦时触发event
on-blur失焦时触发event
on-clear 3.3.0清空时触发