1 line
78 KiB
JavaScript
1 line
78 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{1225:function(t,s,a){},1226:function(t,s,a){},1227:function(t,s,a){},1321:function(t,s,a){"use strict";var n=a(1225);a.n(n).a},1322:function(t,s,a){"use strict";var n=a(1226);a.n(n).a},1323:function(t,s,a){"use strict";var n=a(1227);a.n(n).a},1443:function(t,s,a){"use strict";a.r(s);var n=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-auto-complete :dataSource="dataSource" style="width: 200px" @select="onSelect" @search="handleSearch" placeholder="input here"/>\n',script:"\n export default {\n data() {\n return {\n dataSource: [],\n };\n },\n methods: {\n handleSearch(value) {\n this.dataSource = !value ? [] : [value, value + value, value + value + value];\n },\n onSelect(value) {\n console.log('onSelect', value);\n },\n },\n };\n",style:null,us:"\n#### Basic Usage\nBasic Usage, set datasource of autocomplete with `dataSource` property.\n",cn:"\n#### 基本使用\n基本使用。通过 dataSource 设置自动完成的数据源\n",sourceCode:'<template>\n <a-auto-complete\n :dataSource="dataSource"\n style="width: 200px"\n @select="onSelect"\n @search="handleSearch"\n placeholder="input here"\n />\n</template>\n<script>\n export default {\n data() {\n return {\n dataSource: [],\n };\n },\n methods: {\n handleSearch(value) {\n this.dataSource = !value ? [] : [value, value + value, value + value + value];\n },\n onSelect(value) {\n console.log(\'onSelect\', value);\n },\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("a-auto-complete",{staticStyle:{width:"200px"},attrs:{dataSource:t.dataSource,placeholder:"input here"},on:{select:t.onSelect,search:t.handleSearch}})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"基本使用"}},[t._v("基本使用 "),a("a",{staticClass:"anchor",attrs:{href:"#基本使用"}},[t._v("#")])]),t._v(" "),a("p",[t._v("基本使用。通过 dataSource 设置自动完成的数据源")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Basic-Usage"}},[t._v("Basic Usage "),a("a",{staticClass:"anchor",attrs:{href:"#Basic-Usage"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Basic Usage, set datasource of autocomplete with "),a("code",[t._v("dataSource")]),t._v(" property.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-auto-complete")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"dataSource"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"width: 200px"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@select")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"onSelect"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@search")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"handleSearch"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"input here"')]),t._v("\n />")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataSource")]),t._v(": [],\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n handleSearch(value) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".dataSource = !value ? [] : [value, value + value, value + value + value];\n },\n onSelect(value) {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),a("span",{staticClass:"hljs-string"},[t._v("'onSelect'")]),t._v(", value);\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};n._withStripped=!0;var e={data:function(){return{dataSource:[]}},methods:{handleSearch:function(t){this.dataSource=t?[t,t+t,t+t+t]:[]},onSelect:function(t){console.log("onSelect",t)}}},l=a(31),r=Object(l.a)(e,n,[],!1,null,null,null);r.options.__file="components/auto-complete/demo/basic.md";var c=r.exports,v=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div class="certain-category-search-wrapper" style="width: 250px">\n <a-auto-complete class="certain-category-search" dropdownClassName="certain-category-search-dropdown" :dropdownMatchSelectWidth="false" :dropdownStyle="{width: \'300px\'}" size="large" style="width: 100%" placeholder="input here" optionLabelProp="value">\n <template slot="dataSource">\n <a-select-opt-group v-for="group in dataSource" :key="group.title">\n <span slot="label">\n {{group.title}}\n <a style="float: right" href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">更多\n </a>\n </span>\n <a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title">\n {{opt.title}}\n <span class="certain-search-item-count">{{opt.count}} 人 关注</span>\n </a-select-option>\n </a-select-opt-group>\n <a-select-option disabled="" key="all" class="show-all">\n <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">\n 查看所有结果\n </a>\n </a-select-option>\n </template>\n <a-input>\n <a-icon slot="suffix" type="search" class="certain-category-icon"/>\n </a-input>\n </a-auto-complete>\n </div>\n',script:"\n const dataSource = [\n {\n title: '话题',\n children: [\n {\n title: 'AntDesign',\n count: 10000,\n },\n {\n title: 'AntDesign UI',\n count: 10600,\n },\n ],\n },\n {\n title: '问题',\n children: [\n {\n title: 'AntDesign UI 有多好',\n count: 60100,\n },\n {\n title: 'AntDesign 是啥',\n count: 30010,\n },\n ],\n },\n {\n title: '文章',\n children: [\n {\n title: 'AntDesign 是一个设计语言',\n count: 100000,\n },\n ],\n },\n ];\n export default {\n data() {\n return {\n dataSource,\n };\n },\n };\n",style:"\n .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {\n color: #666;\n font-weight: bold;\n }\n\n .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {\n border-bottom: 1px solid #f6f6f6;\n }\n\n .certain-category-search-dropdown .ant-select-dropdown-menu-item {\n padding-left: 16px;\n }\n\n .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {\n text-align: center;\n cursor: default;\n }\n\n .certain-category-search-dropdown .ant-select-dropdown-menu {\n max-height: 300px;\n }\n",us:"\n#### Lookup-Patterns - Certain Category\nLookup-Patterns - Certain Category\n",cn:"\n#### 查询模式 - 确定类目\n查询模式 - 确定类目\n",sourceCode:'<template>\n <div class="certain-category-search-wrapper" style="width: 250px">\n <a-auto-complete\n class="certain-category-search"\n dropdownClassName="certain-category-search-dropdown"\n :dropdownMatchSelectWidth="false"\n :dropdownStyle="{width: \'300px\'}"\n size="large"\n style="width: 100%"\n placeholder="input here"\n optionLabelProp="value"\n >\n <template slot="dataSource">\n <a-select-opt-group v-for="group in dataSource" :key="group.title">\n <span slot="label">\n {{group.title}}\n <a\n style="float: right"\n href="https://www.google.com/search?q=antd"\n target="_blank"\n rel="noopener noreferrer"\n >更多\n </a>\n </span>\n <a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title">\n {{opt.title}}\n <span class="certain-search-item-count">{{opt.count}} 人 关注</span>\n </a-select-option>\n </a-select-opt-group>\n <a-select-option disabled key="all" class="show-all">\n <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">\n 查看所有结果\n </a>\n </a-select-option>\n </template>\n <a-input>\n <a-icon slot="suffix" type="search" class="certain-category-icon" />\n </a-input>\n </a-auto-complete>\n </div>\n</template>\n<script>\n const dataSource = [\n {\n title: \'话题\',\n children: [\n {\n title: \'AntDesign\',\n count: 10000,\n },\n {\n title: \'AntDesign UI\',\n count: 10600,\n },\n ],\n },\n {\n title: \'问题\',\n children: [\n {\n title: \'AntDesign UI 有多好\',\n count: 60100,\n },\n {\n title: \'AntDesign 是啥\',\n count: 30010,\n },\n ],\n },\n {\n title: \'文章\',\n children: [\n {\n title: \'AntDesign 是一个设计语言\',\n count: 100000,\n },\n ],\n },\n ];\n export default {\n data() {\n return {\n dataSource,\n };\n },\n };\n<\/script>\n<style>\n .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {\n color: #666;\n font-weight: bold;\n }\n\n .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {\n border-bottom: 1px solid #f6f6f6;\n }\n\n .certain-category-search-dropdown .ant-select-dropdown-menu-item {\n padding-left: 16px;\n }\n\n .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {\n text-align: center;\n cursor: default;\n }\n\n .certain-category-search-dropdown .ant-select-dropdown-menu {\n max-height: 300px;\n }\n</style>\n<style scoped>\n .certain-category-search-wrapper\n >>> .certain-category-search.ant-select-auto-complete\n .ant-input-affix-wrapper\n .ant-input-suffix {\n right: 12px;\n }\n .certain-category-search-wrapper >>> .certain-search-item-count {\n position: absolute;\n color: #999;\n right: 16px;\n }\n .certain-category-search-wrapper\n >>> .certain-category-search.ant-select-focused\n .certain-category-icon {\n color: #108ee9;\n }\n .certain-category-search-wrapper >>> .certain-category-icon {\n color: #6e6e6e;\n transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n font-size: 16px;\n }\n</style>\n'}}},[a("template",{slot:"component"},[a("div",{staticClass:"certain-category-search-wrapper",staticStyle:{width:"250px"}},[a("a-auto-complete",{staticClass:"certain-category-search",staticStyle:{width:"100%"},attrs:{dropdownClassName:"certain-category-search-dropdown",dropdownMatchSelectWidth:!1,dropdownStyle:{width:"300px"},size:"large",placeholder:"input here",optionLabelProp:"value"}},[a("template",{slot:"dataSource"},[t._l(t.dataSource,(function(s){return a("a-select-opt-group",{key:s.title},[a("span",{attrs:{slot:"label"},slot:"label"},[t._v("\n "+t._s(s.title)+"\n "),a("a",{staticStyle:{float:"right"},attrs:{href:"https://www.google.com/search?q=antd",target:"_blank",rel:"noopener noreferrer"}},[t._v("更多\n ")])]),t._v(" "),t._l(s.children,(function(s){return a("a-select-option",{key:s.title,attrs:{value:s.title}},[t._v("\n "+t._s(s.title)+"\n "),a("span",{staticClass:"certain-search-item-count"},[t._v(t._s(s.count)+" 人 关注")])])}))],2)})),t._v(" "),a("a-select-option",{key:"all",staticClass:"show-all",attrs:{disabled:""}},[a("a",{attrs:{href:"https://www.google.com/search?q=antd",target:"_blank",rel:"noopener noreferrer"}},[t._v("\n 查看所有结果\n ")])])],2),t._v(" "),a("a-input",[a("a-icon",{staticClass:"certain-category-icon",attrs:{slot:"suffix",type:"search"},slot:"suffix"})],1)],2)],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"查询模式---确定类目"}},[t._v("查询模式 - 确定类目 "),a("a",{staticClass:"anchor",attrs:{href:"#查询模式---确定类目"}},[t._v("#")])]),t._v(" "),a("p",[t._v("查询模式 - 确定类目")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Lookup-Patterns---Certain-Category"}},[t._v("Lookup-Patterns - Certain Category "),a("a",{staticClass:"anchor",attrs:{href:"#Lookup-Patterns---Certain-Category"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Lookup-Patterns - Certain Category")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"certain-category-search-wrapper"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"width: 250px"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-auto-complete")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"certain-category-search"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("dropdownClassName")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"certain-category-search-dropdown"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":dropdownMatchSelectWidth")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"false"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":dropdownStyle")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"{width: '300px'}\"")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"large"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"width: 100%"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"input here"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("optionLabelProp")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"value"')]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"dataSource"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-select-opt-group")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"group in dataSource"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"group.title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"label"')]),t._v(">")]),t._v("\n "),a("span",[t._v("{{")]),t._v("group.title"),a("span",[t._v("}}")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"float: right"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"https://www.google.com/search?q=antd"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("target")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"_blank"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("rel")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"noopener noreferrer"')]),t._v("\n >")]),t._v("更多\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-select-option")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"opt in group.children"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"opt.title"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":value")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"opt.title"')]),t._v(">")]),t._v("\n "),a("span",[t._v("{{")]),t._v("opt.title"),a("span",[t._v("}}")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"certain-search-item-count"')]),t._v(">")]),a("span",[t._v("{{")]),t._v("opt.count"),a("span",[t._v("}}")]),t._v(" 人 关注"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-select-option")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-select-opt-group")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-select-option")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("disabled")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"all"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"show-all"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"https://www.google.com/search?q=antd"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("target")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"_blank"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("rel")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"noopener noreferrer"')]),t._v(">")]),t._v("\n 查看所有结果\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-select-option")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-input")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"suffix"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"search"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"certain-category-icon"')]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-input")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-auto-complete")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" dataSource = [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'话题'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'AntDesign'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("count")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("10000")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'AntDesign UI'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("count")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("10600")]),t._v(",\n },\n ],\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'问题'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'AntDesign UI 有多好'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("count")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("60100")]),t._v(",\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'AntDesign 是啥'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("count")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("30010")]),t._v(",\n },\n ],\n },\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'文章'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("children")]),t._v(": [\n {\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'AntDesign 是一个设计语言'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("count")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("100000")]),t._v(",\n },\n ],\n },\n ];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n dataSource,\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-search-dropdown")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-select-dropdown-menu-item-group-title")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("color")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("#666")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("font-weight")]),t._v(": bold;\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-search-dropdown")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-select-dropdown-menu-item-group")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("border-bottom")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("1px")]),t._v(" solid "),a("span",{staticClass:"hljs-number"},[t._v("#f6f6f6")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-search-dropdown")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-select-dropdown-menu-item")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("padding-left")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("16px")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-search-dropdown")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-select-dropdown-menu-item")]),a("span",{staticClass:"hljs-selector-class"},[t._v(".show-all")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("text-align")]),t._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[t._v("cursor")]),t._v(": default;\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-search-dropdown")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-select-dropdown-menu")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("max-height")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("300px")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("scoped")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-search-wrapper")]),t._v("\n >>> "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-search")]),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-select-auto-complete")]),t._v("\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-input-affix-wrapper")]),t._v("\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-input-suffix")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("right")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("12px")]),t._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-search-wrapper")]),t._v(" >>> "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-search-item-count")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("position")]),t._v(": absolute;\n "),a("span",{staticClass:"hljs-attribute"},[t._v("color")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("#999")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("right")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("16px")]),t._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-search-wrapper")]),t._v("\n >>> "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-search")]),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-select-focused")]),t._v("\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-icon")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("color")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("#108ee9")]),t._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-search-wrapper")]),t._v(" >>> "),a("span",{staticClass:"hljs-selector-class"},[t._v(".certain-category-icon")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("color")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("#6e6e6e")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("transition")]),t._v(": all "),a("span",{staticClass:"hljs-number"},[t._v("0.3s")]),t._v(" "),a("span",{staticClass:"hljs-built_in"},[t._v("cubic-bezier")]),t._v("(0.645, 0.045, 0.355, 1);\n "),a("span",{staticClass:"hljs-attribute"},[t._v("font-size")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("16px")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};v._withStripped=!0;var i=[{title:"话题",children:[{title:"AntDesign",count:1e4},{title:"AntDesign UI",count:10600}]},{title:"问题",children:[{title:"AntDesign UI 有多好",count:60100},{title:"AntDesign 是啥",count:30010}]},{title:"文章",children:[{title:"AntDesign 是一个设计语言",count:1e5}]}],o={data:function(){return{dataSource:i}}},_=(a(1321),a(1322),Object(l.a)(o,v,[],!1,null,"33dd250b",null));_.options.__file="components/auto-complete/demo/certain-category.md";var p=_.exports,h=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-auto-complete :dataSource="dataSource" style="width: 200px" @search="handleSearch" @select="onSelect">\n <a-textarea placeholder="input here" class="custom" style="height: 50px" @keypress="handleKeyPress"/>\n </a-auto-complete>\n',script:"\n export default {\n data() {\n return {\n dataSource: [],\n };\n },\n methods: {\n onSelect(value) {\n console.log('onSelect', value);\n },\n handleSearch(value) {\n this.dataSource = !value ? [] : [value, value + value, value + value + value];\n },\n handleKeyPress(ev) {\n console.log('handleKeyPress', ev);\n },\n },\n };\n",style:null,us:"\n#### Customize Input Component\nCustomize Input Component\n",cn:"\n#### 自定义输入组件\n自定义输入组件。\n",sourceCode:'<template>\n <a-auto-complete\n :dataSource="dataSource"\n style="width: 200px"\n @search="handleSearch"\n @select="onSelect"\n >\n <a-textarea\n placeholder="input here"\n class="custom"\n style="height: 50px"\n @keypress="handleKeyPress"\n />\n </a-auto-complete>\n</template>\n<script>\n export default {\n data() {\n return {\n dataSource: [],\n };\n },\n methods: {\n onSelect(value) {\n console.log(\'onSelect\', value);\n },\n handleSearch(value) {\n this.dataSource = !value ? [] : [value, value + value, value + value + value];\n },\n handleKeyPress(ev) {\n console.log(\'handleKeyPress\', ev);\n },\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("a-auto-complete",{staticStyle:{width:"200px"},attrs:{dataSource:t.dataSource},on:{search:t.handleSearch,select:t.onSelect}},[a("a-textarea",{staticClass:"custom",staticStyle:{height:"50px"},attrs:{placeholder:"input here"},on:{keypress:t.handleKeyPress}})],1)],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"自定义输入组件"}},[t._v("自定义输入组件 "),a("a",{staticClass:"anchor",attrs:{href:"#自定义输入组件"}},[t._v("#")])]),t._v(" "),a("p",[t._v("自定义输入组件。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Customize-Input-Component"}},[t._v("Customize Input Component "),a("a",{staticClass:"anchor",attrs:{href:"#Customize-Input-Component"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Customize Input Component")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-auto-complete")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"dataSource"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"width: 200px"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@search")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"handleSearch"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@select")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"onSelect"')]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-textarea")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"input here"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"custom"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"height: 50px"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@keypress")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"handleKeyPress"')]),t._v("\n />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-auto-complete")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataSource")]),t._v(": [],\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onSelect(value) {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),a("span",{staticClass:"hljs-string"},[t._v("'onSelect'")]),t._v(", value);\n },\n handleSearch(value) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".dataSource = !value ? [] : [value, value + value, value + value + value];\n },\n handleKeyPress(ev) {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),a("span",{staticClass:"hljs-string"},[t._v("'handleKeyPress'")]),t._v(", ev);\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};h._withStripped=!0;var u={data:function(){return{dataSource:[]}},methods:{onSelect:function(t){console.log("onSelect",t)},handleSearch:function(t){this.dataSource=t?[t,t+t,t+t+t]:[]},handleKeyPress:function(t){console.log("handleKeyPress",t)}}},d=Object(l.a)(u,h,[],!1,null,null,null);d.options.__file="components/auto-complete/demo/custom.md";var C=d.exports,m=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-auto-complete :dataSource="dataSource" style="width: 200px" placeholder="input here" :filterOption="filterOption"/>\n',script:"\n export default {\n data() {\n return {\n dataSource: ['Burns Bay Road', 'Downing Street', 'Wall Street'],\n };\n },\n methods: {\n filterOption(input, option) {\n return (\n option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0\n );\n },\n },\n };\n",style:null,us:"\n#### Non-case-sensitive AutoComplete\nA non-case-sensitive AutoComplete\n",cn:"\n#### 不区分大小写\n不区分大小写的 AutoComplete\n",sourceCode:'<template>\n <a-auto-complete\n :dataSource="dataSource"\n style="width: 200px"\n placeholder="input here"\n :filterOption="filterOption"\n />\n</template>\n<script>\n export default {\n data() {\n return {\n dataSource: [\'Burns Bay Road\', \'Downing Street\', \'Wall Street\'],\n };\n },\n methods: {\n filterOption(input, option) {\n return (\n option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0\n );\n },\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("a-auto-complete",{staticStyle:{width:"200px"},attrs:{dataSource:t.dataSource,placeholder:"input here",filterOption:t.filterOption}})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"不区分大小写"}},[t._v("不区分大小写 "),a("a",{staticClass:"anchor",attrs:{href:"#不区分大小写"}},[t._v("#")])]),t._v(" "),a("p",[t._v("不区分大小写的 AutoComplete")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Non-case-sensitive-AutoComplete"}},[t._v("Non-case-sensitive AutoComplete "),a("a",{staticClass:"anchor",attrs:{href:"#Non-case-sensitive-AutoComplete"}},[t._v("#")])]),t._v(" "),a("p",[t._v("A non-case-sensitive AutoComplete")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-auto-complete")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"dataSource"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"width: 200px"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"input here"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":filterOption")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"filterOption"')]),t._v("\n />")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataSource")]),t._v(": ["),a("span",{staticClass:"hljs-string"},[t._v("'Burns Bay Road'")]),t._v(", "),a("span",{staticClass:"hljs-string"},[t._v("'Downing Street'")]),t._v(", "),a("span",{staticClass:"hljs-string"},[t._v("'Wall Street'")]),t._v("],\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n filterOption(input, option) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" (\n option.componentOptions.children["),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("].text.toUpperCase().indexOf(input.toUpperCase()) >= "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("\n );\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};m._withStripped=!0;var j={data:function(){return{dataSource:["Burns Bay Road","Downing Street","Wall Street"]}},methods:{filterOption:function(t,s){return s.componentOptions.children[0].text.toUpperCase().indexOf(t.toUpperCase())>=0}}},g=Object(l.a)(j,m,[],!1,null,null,null);g.options.__file="components/auto-complete/demo/non-case-sensitive.md";var f=g.exports,y=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-auto-complete style="width: 200px" @search="handleSearch" placeholder="input here">\n <template slot="dataSource">\n <a-select-option v-for="email in result" :key="email">{{email}}</a-select-option>\n </template>\n </a-auto-complete>\n',script:"\n export default {\n data() {\n return {\n result: [],\n };\n },\n methods: {\n handleSearch(value) {\n let result;\n if (!value || value.indexOf('@') >= 0) {\n result = [];\n } else {\n result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);\n }\n this.result = result;\n },\n },\n };\n",style:null,us:'\n#### Customized\nYou could pass `slot="dataSource` as children of `AutoComplete`, instead of using `dataSource`。\n',cn:'\n#### 自定义选项\n也可以直接传递slot="dataSource"的Option\n',sourceCode:'<template>\n <a-auto-complete style="width: 200px" @search="handleSearch" placeholder="input here">\n <template slot="dataSource">\n <a-select-option v-for="email in result" :key="email">{{email}}</a-select-option>\n </template>\n </a-auto-complete>\n</template>\n<script>\n export default {\n data() {\n return {\n result: [],\n };\n },\n methods: {\n handleSearch(value) {\n let result;\n if (!value || value.indexOf(\'@\') >= 0) {\n result = [];\n } else {\n result = [\'gmail.com\', \'163.com\', \'qq.com\'].map(domain => `${value}@${domain}`);\n }\n this.result = result;\n },\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("a-auto-complete",{staticStyle:{width:"200px"},attrs:{placeholder:"input here"},on:{search:t.handleSearch}},[a("template",{slot:"dataSource"},t._l(t.result,(function(s){return a("a-select-option",{key:s},[t._v(t._s(s))])})),1)],2)],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"自定义选项"}},[t._v("自定义选项 "),a("a",{staticClass:"anchor",attrs:{href:"#自定义选项"}},[t._v("#")])]),t._v(" "),a("p",[t._v('也可以直接传递slot="dataSource"的Option')])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Customized"}},[t._v("Customized "),a("a",{staticClass:"anchor",attrs:{href:"#Customized"}},[t._v("#")])]),t._v(" "),a("p",[t._v("You could pass "),a("code",[t._v('slot="dataSource')]),t._v(" as children of "),a("code",[t._v("AutoComplete")]),t._v(", instead of using "),a("code",[t._v("dataSource")]),t._v("。")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-auto-complete")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"width: 200px"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@search")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"handleSearch"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"input here"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"dataSource"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-select-option")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"email in result"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"email"')]),t._v(">")]),a("span",[t._v("{{")]),t._v("email"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-select-option")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-auto-complete")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("result")]),t._v(": [],\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n handleSearch(value) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" result;\n "),a("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (!value || value.indexOf("),a("span",{staticClass:"hljs-string"},[t._v("'@'")]),t._v(") >= "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(") {\n result = [];\n } "),a("span",{staticClass:"hljs-keyword"},[t._v("else")]),t._v(" {\n result = ["),a("span",{staticClass:"hljs-string"},[t._v("'gmail.com'")]),t._v(", "),a("span",{staticClass:"hljs-string"},[t._v("'163.com'")]),t._v(", "),a("span",{staticClass:"hljs-string"},[t._v("'qq.com'")]),t._v("].map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("domain")]),t._v(" =>")]),t._v(" "),a("span",{staticClass:"hljs-string"},[t._v("`"),a("span",{staticClass:"hljs-subst"},[t._v("${value}")]),t._v("@"),a("span",{staticClass:"hljs-subst"},[t._v("${domain}")]),t._v("`")]),t._v(");\n }\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".result = result;\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};y._withStripped=!0;var b={data:function(){return{result:[]}},methods:{handleSearch:function(t){var s=void 0;s=!t||t.indexOf("@")>=0?[]:["gmail.com","163.com","qq.com"].map((function(s){return t+"@"+s})),this.result=s}}},w=Object(l.a)(b,y,[],!1,null,null,null);w.options.__file="components/auto-complete/demo/options.md";var S=w.exports,x=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div class="global-search-wrapper" style="width: 300px">\n <a-auto-complete class="global-search" size="large" style="width: 100%" @select="onSelect" @search="handleSearch" placeholder="input here" optionLabelProp="text">\n <template slot="dataSource">\n <a-select-option v-for="item in dataSource" :key="item.category" :text="item.category">\n {{item.query}} 在\n <a :href="`https://s.taobao.com/search?q=${item.query}`" target="_blank" rel="noopener noreferrer">\n {{item.category}}\n </a>\n 区块中\n <span className="global-search-item-count">约 {{item.count}} 个结果</span>\n </a-select-option>\n </template>\n <a-input>\n <a-button slot="suffix" class="search-btn" size="large" type="primary">\n <a-icon type="search"/>\n </a-button>\n </a-input>\n </a-auto-complete>\n </div>\n',script:"\n export default {\n data() {\n return {\n dataSource: [],\n };\n },\n methods: {\n onSelect(value) {\n console.log('onSelect', value);\n },\n\n handleSearch(value) {\n this.dataSource = value ? this.searchResult(value) : [];\n },\n\n getRandomInt(max, min = 0) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n },\n\n searchResult(query) {\n return new Array(this.getRandomInt(5))\n .join('.')\n .split('.')\n .map((item, idx) => ({\n query,\n category: `${query}${idx}`,\n count: this.getRandomInt(200, 100),\n }));\n },\n },\n };\n",style:"\n .global-search-wrapper {\n padding-right: 50px;\n }\n\n .global-search {\n width: 100%;\n }\n\n .global-search.ant-select-auto-complete .ant-select-selection--single {\n margin-right: -46px;\n }\n\n .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {\n padding-right: 62px;\n }\n\n .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {\n right: 0;\n }\n\n .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .global-search-item-count {\n position: absolute;\n right: 16px;\n }\n",us:"\n#### Lookup-Patterns - Uncertain Category\nLookup-Patterns - Uncertain Category\n",cn:"\n#### 查询模式 - 不确定类目\n查询模式 - 不确定类目\n",sourceCode:'<template>\n <div class="global-search-wrapper" style="width: 300px">\n <a-auto-complete\n class="global-search"\n size="large"\n style="width: 100%"\n @select="onSelect"\n @search="handleSearch"\n placeholder="input here"\n optionLabelProp="text"\n >\n <template slot="dataSource">\n <a-select-option v-for="item in dataSource" :key="item.category" :text="item.category">\n {{item.query}} 在\n <a\n :href="`https://s.taobao.com/search?q=${item.query}`"\n target="_blank"\n rel="noopener noreferrer"\n >\n {{item.category}}\n </a>\n 区块中\n <span className="global-search-item-count">约 {{item.count}} 个结果</span>\n </a-select-option>\n </template>\n <a-input>\n <a-button slot="suffix" class="search-btn" size="large" type="primary">\n <a-icon type="search" />\n </a-button>\n </a-input>\n </a-auto-complete>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n dataSource: [],\n };\n },\n methods: {\n onSelect(value) {\n console.log(\'onSelect\', value);\n },\n\n handleSearch(value) {\n this.dataSource = value ? this.searchResult(value) : [];\n },\n\n getRandomInt(max, min = 0) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n },\n\n searchResult(query) {\n return new Array(this.getRandomInt(5))\n .join(\'.\')\n .split(\'.\')\n .map((item, idx) => ({\n query,\n category: `${query}${idx}`,\n count: this.getRandomInt(200, 100),\n }));\n },\n },\n };\n<\/script>\n\n<style>\n .global-search-wrapper {\n padding-right: 50px;\n }\n\n .global-search {\n width: 100%;\n }\n\n .global-search.ant-select-auto-complete .ant-select-selection--single {\n margin-right: -46px;\n }\n\n .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {\n padding-right: 62px;\n }\n\n .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {\n right: 0;\n }\n\n .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .global-search-item-count {\n position: absolute;\n right: 16px;\n }\n</style>\n'}}},[a("template",{slot:"component"},[a("div",{staticClass:"global-search-wrapper",staticStyle:{width:"300px"}},[a("a-auto-complete",{staticClass:"global-search",staticStyle:{width:"100%"},attrs:{size:"large",placeholder:"input here",optionLabelProp:"text"},on:{select:t.onSelect,search:t.handleSearch}},[a("template",{slot:"dataSource"},t._l(t.dataSource,(function(s){return a("a-select-option",{key:s.category,attrs:{text:s.category}},[t._v("\n "+t._s(s.query)+" 在\n "),a("a",{attrs:{href:"https://s.taobao.com/search?q="+s.query,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n "+t._s(s.category)+"\n ")]),t._v("\n 区块中\n "),a("span",{attrs:{className:"global-search-item-count"}},[t._v("约 "+t._s(s.count)+" 个结果")])])})),1),t._v(" "),a("a-input",[a("a-button",{staticClass:"search-btn",attrs:{slot:"suffix",size:"large",type:"primary"},slot:"suffix"},[a("a-icon",{attrs:{type:"search"}})],1)],1)],2)],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"查询模式---不确定类目"}},[t._v("查询模式 - 不确定类目 "),a("a",{staticClass:"anchor",attrs:{href:"#查询模式---不确定类目"}},[t._v("#")])]),t._v(" "),a("p",[t._v("查询模式 - 不确定类目")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Lookup-Patterns---Uncertain-Category"}},[t._v("Lookup-Patterns - Uncertain Category "),a("a",{staticClass:"anchor",attrs:{href:"#Lookup-Patterns---Uncertain-Category"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Lookup-Patterns - Uncertain Category")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"global-search-wrapper"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"width: 300px"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-auto-complete")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"global-search"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"large"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"width: 100%"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@select")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"onSelect"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@search")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"handleSearch"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"input here"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("optionLabelProp")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"text"')]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"dataSource"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-select-option")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"item in dataSource"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"item.category"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":text")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"item.category"')]),t._v(">")]),t._v("\n "),a("span",[t._v("{{")]),t._v("item.query"),a("span",[t._v("}}")]),t._v(" 在\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"`https://s.taobao.com/search?q=${item.query}`"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("target")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"_blank"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("rel")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"noopener noreferrer"')]),t._v("\n >")]),t._v("\n "),a("span",[t._v("{{")]),t._v("item.category"),a("span",[t._v("}}")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n 区块中\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("className")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"global-search-item-count"')]),t._v(">")]),t._v("约 "),a("span",[t._v("{{")]),t._v("item.count"),a("span",[t._v("}}")]),t._v(" 个结果"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-select-option")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-input")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"suffix"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"search-btn"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"large"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"search"')]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-input")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-auto-complete")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("dataSource")]),t._v(": [],\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onSelect(value) {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),a("span",{staticClass:"hljs-string"},[t._v("'onSelect'")]),t._v(", value);\n },\n\n handleSearch(value) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".dataSource = value ? "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".searchResult(value) : [];\n },\n\n getRandomInt(max, min = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(") {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" "),a("span",{staticClass:"hljs-built_in"},[t._v("Math")]),t._v(".floor("),a("span",{staticClass:"hljs-built_in"},[t._v("Math")]),t._v(".random() * (max - min + "),a("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(")) + min;\n },\n\n searchResult(query) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("new")]),t._v(" "),a("span",{staticClass:"hljs-built_in"},[t._v("Array")]),t._v("("),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".getRandomInt("),a("span",{staticClass:"hljs-number"},[t._v("5")]),t._v("))\n .join("),a("span",{staticClass:"hljs-string"},[t._v("'.'")]),t._v(")\n .split("),a("span",{staticClass:"hljs-string"},[t._v("'.'")]),t._v(")\n .map("),a("span",{staticClass:"hljs-function"},[t._v("("),a("span",{staticClass:"hljs-params"},[t._v("item, idx")]),t._v(") =>")]),t._v(" ({\n query,\n "),a("span",{staticClass:"hljs-attr"},[t._v("category")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`"),a("span",{staticClass:"hljs-subst"},[t._v("${query}")]),a("span",{staticClass:"hljs-subst"},[t._v("${idx}")]),t._v("`")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("count")]),t._v(": "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".getRandomInt("),a("span",{staticClass:"hljs-number"},[t._v("200")]),t._v(", "),a("span",{staticClass:"hljs-number"},[t._v("100")]),t._v("),\n }));\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".global-search-wrapper")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("padding-right")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("50px")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".global-search")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("100%")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".global-search")]),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-select-auto-complete")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-select-selection--single")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("margin-right")]),t._v(": -"),a("span",{staticClass:"hljs-number"},[t._v("46px")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".global-search")]),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-select-auto-complete")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-input-affix-wrapper")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-input")]),a("span",{staticClass:"hljs-selector-pseudo"},[t._v(":not(")]),a("span",{staticClass:"hljs-selector-pseudo"},[t._v(":last-child)")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("padding-right")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("62px")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".global-search")]),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-select-auto-complete")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-input-affix-wrapper")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-input-suffix")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("right")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".global-search")]),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-select-auto-complete")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-input-affix-wrapper")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-input-suffix")]),t._v(" "),a("span",{staticClass:"hljs-selector-tag"},[t._v("button")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("border-top-left-radius")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("border-bottom-left-radius")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(";\n }\n\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".global-search-item-count")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("position")]),t._v(": absolute;\n "),a("span",{staticClass:"hljs-attribute"},[t._v("right")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("16px")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};x._withStripped=!0;var k={data:function(){return{dataSource:[]}},methods:{onSelect:function(t){console.log("onSelect",t)},handleSearch:function(t){this.dataSource=t?this.searchResult(t):[]},getRandomInt:function(t){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return Math.floor(Math.random()*(t-s+1))+s},searchResult:function(t){var s=this;return new Array(this.getRandomInt(5)).join(".").split(".").map((function(a,n){return{query:t,category:""+t+n,count:s.getRandomInt(200,100)}}))}}},A=(a(1323),Object(l.a)(k,x,[],!1,null,null,null));A.options.__file="components/auto-complete/demo/uncertain-category.md";var O=A.exports,I=function(){var t=this.$createElement;this._self._c;return this._m(0)};I._withStripped=!0;var P=Object(l.a)({},I,[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[a("h2",{attrs:{id:"API"}},[t._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("a-auto-complete")]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":dataSource")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"dataSource"')]),t._v(" />")]),t._v("\n")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("allowClear")]),t._v(" "),a("td",[t._v("支持清除, 单选模式有效")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("autoFocus")]),t._v(" "),a("td",[t._v("自动获取焦点")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("backfill")]),t._v(" "),a("td",[t._v("使用键盘选择选项的时候把选中项回填到输入框中")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v('slot="default" (自定义输入框)')]),t._v(" "),a("td",[t._v("自定义输入框")]),t._v(" "),a("td",[t._v("HTMLInputElement / HTMLTextAreaElement")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("<Input />")])])]),t._v(" "),a("tr",[a("td",[t._v("dataSource")]),t._v(" "),a("td",[t._v("自动完成的数据源")]),t._v(" "),a("td",[t._v("slot | "),a("a",{attrs:{href:"https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9"}},[t._v("DataSourceItemType")]),t._v("[]")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("defaultActiveFirstOption")]),t._v(" "),a("td",[t._v("是否默认高亮第一个选项。")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("true")])]),t._v(" "),a("tr",[a("td",[t._v("defaultValue")]),t._v(" "),a("td",[t._v("指定默认选中的条目")]),t._v(" "),a("td",[t._v("string|string[]| 无")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("是否禁用")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("filterOption")]),t._v(" "),a("td",[t._v("是否根据输入项进行筛选。当其为一个函数时，会接收 "),a("code",{pre:!0},[t._v("inputValue")]),t._v(" "),a("code",{pre:!0},[t._v("option")]),t._v(" 两个参数，当 "),a("code",{pre:!0},[t._v("option")]),t._v(" 符合筛选条件时，应返回 "),a("code",{pre:!0},[t._v("true")]),t._v("，反之则返回 "),a("code",{pre:!0},[t._v("false")]),t._v("。")]),t._v(" "),a("td",[t._v("boolean or function(inputValue, option)")]),t._v(" "),a("td",[t._v("true")])]),t._v(" "),a("tr",[a("td",[t._v("optionLabelProp")]),t._v(" "),a("td",[t._v("回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 "),a("code",{pre:!0},[t._v("value")]),t._v("。")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("children")])])]),t._v(" "),a("tr",[a("td",[t._v("placeholder")]),t._v(" "),a("td",[t._v("输入框提示")]),t._v(" "),a("td",[t._v("string | slot")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("value(v-model)")]),t._v(" "),a("td",[t._v("指定当前选中的条目")]),t._v(" "),a("td",[t._v("string|string[]|{ key: string, label: string|vNodes }|Array<{ key: string, label: string|vNodes }>")]),t._v(" "),a("td",[t._v("无")])]),t._v(" "),a("tr",[a("td",[t._v("defaultOpen")]),t._v(" "),a("td",[t._v("是否默认展开下拉菜单")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("open")]),t._v(" "),a("td",[t._v("是否展开下拉菜单")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"事件"}},[t._v("事件 "),a("a",{staticClass:"anchor",attrs:{href:"#事件"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名称")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("回调参数")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("change")]),t._v(" "),a("td",[t._v("选中 option，或 input 的 value 变化时，调用此函数")]),t._v(" "),a("td",[t._v("function(value)")])]),t._v(" "),a("tr",[a("td",[t._v("blur")]),t._v(" "),a("td",[t._v("失去焦点时的回调")]),t._v(" "),a("td",[t._v("function()")])]),t._v(" "),a("tr",[a("td",[t._v("focus")]),t._v(" "),a("td",[t._v("获得焦点时的回调")]),t._v(" "),a("td",[t._v("function()")])]),t._v(" "),a("tr",[a("td",[t._v("search")]),t._v(" "),a("td",[t._v("搜索补全项的时候调用")]),t._v(" "),a("td",[t._v("function(value)")])]),t._v(" "),a("tr",[a("td",[t._v("select")]),t._v(" "),a("td",[t._v("被选中时调用，参数为选中项的 value 值")]),t._v(" "),a("td",[t._v("function(value, option)")])]),t._v(" "),a("tr",[a("td",[t._v("dropdownVisibleChange")]),t._v(" "),a("td",[t._v("展开下拉菜单的回调")]),t._v(" "),a("td",[t._v("function(open)")])])])]),t._v(" "),a("h2",{attrs:{id:"方法"}},[t._v("方法 "),a("a",{staticClass:"anchor",attrs:{href:"#方法"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("名称")]),t._v(" "),a("th",[t._v("描述")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("blur()")]),t._v(" "),a("td",[t._v("移除焦点")])]),t._v(" "),a("tr",[a("td",[t._v("focus()")]),t._v(" "),a("td",[t._v("获取焦点")])])])])])}],!1,null,null,null);P.options.__file="components/auto-complete/index.zh-CN.md";var q=P.exports,D=function(){var t=this.$createElement;this._self._c;return this._m(0)};D._withStripped=!0;var z=Object(l.a)({},D,[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[a("h2",{attrs:{id:"API"}},[t._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("a-auto-complete")]),t._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":dataSource")]),t._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"dataSource"')]),t._v(" />")]),t._v("\n")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("allowClear")]),t._v(" "),a("td",[t._v("Show clear button, effective in multiple mode only.")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("autoFocus")]),t._v(" "),a("td",[t._v("get focus when component mounted")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("backfill")]),t._v(" "),a("td",[t._v("backfill selected item the input when using keyboard")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v('slot="default" (for customize input element)')]),t._v(" "),a("td",[t._v("customize input element")]),t._v(" "),a("td",[t._v("HTMLInputElement / HTMLTextAreaElement")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("<Input />")])])]),t._v(" "),a("tr",[a("td",[t._v("dataSource")]),t._v(" "),a("td",[t._v("Data source for autocomplete")]),t._v(" "),a("td",[t._v("slot | "),a("a",{attrs:{href:"https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9"}},[t._v("DataSourceItemType")]),t._v("[]")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("defaultActiveFirstOption")]),t._v(" "),a("td",[t._v("Whether active first option by default")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("true")])]),t._v(" "),a("tr",[a("td",[t._v("defaultValue")]),t._v(" "),a("td",[t._v("Initial selected option.")]),t._v(" "),a("td",[t._v("string|string[]| -")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("Whether disabled select")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("filterOption")]),t._v(" "),a("td",[t._v("If true, filter options by input, if function, filter options against it. The function will receive two arguments, "),a("code",{pre:!0},[t._v("inputValue")]),t._v(" and "),a("code",{pre:!0},[t._v("option")]),t._v(", if the function returns "),a("code",{pre:!0},[t._v("true")]),t._v(", the option will be included in the filtered set; Otherwise, it will be excluded.")]),t._v(" "),a("td",[t._v("boolean or function(inputValue, option)")]),t._v(" "),a("td",[t._v("true")])]),t._v(" "),a("tr",[a("td",[t._v("optionLabelProp")]),t._v(" "),a("td",[t._v("Which prop value of option will render as content of select.")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",{pre:!0},[t._v("children")])])]),t._v(" "),a("tr",[a("td",[t._v("placeholder")]),t._v(" "),a("td",[t._v("placeholder of input")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("value(v-model)")]),t._v(" "),a("td",[t._v("selected option")]),t._v(" "),a("td",[t._v("string|string[]|{ key: string, label: string|vNodes }|Array<{ key: string, label: string|vNodes }>")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("defaultOpen")]),t._v(" "),a("td",[t._v("Initial open state of dropdown")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("open")]),t._v(" "),a("td",[t._v("Controlled open state of dropdown")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"events"}},[t._v("events "),a("a",{staticClass:"anchor",attrs:{href:"#events"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Events Name")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Arguments")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("change")]),t._v(" "),a("td",[t._v("Called when select an option or input value change, or value of input is changed")]),t._v(" "),a("td",[t._v("function(value)")])]),t._v(" "),a("tr",[a("td",[t._v("blur")]),t._v(" "),a("td",[t._v("Called when leaving the component.")]),t._v(" "),a("td",[t._v("function()")])]),t._v(" "),a("tr",[a("td",[t._v("focus")]),t._v(" "),a("td",[t._v("Called when entering the component")]),t._v(" "),a("td",[t._v("function()")])]),t._v(" "),a("tr",[a("td",[t._v("search")]),t._v(" "),a("td",[t._v("Called when searching items.")]),t._v(" "),a("td",[t._v("function(value)")])]),t._v(" "),a("tr",[a("td",[t._v("select")]),t._v(" "),a("td",[t._v("Called when a option is selected. param is option's value and option instance.")]),t._v(" "),a("td",[t._v("function(value, option)")])]),t._v(" "),a("tr",[a("td",[t._v("dropdownVisibleChange")]),t._v(" "),a("td",[t._v("Call when dropdown open")]),t._v(" "),a("td",[t._v("function(open)")])])])]),t._v(" "),a("h2",{attrs:{id:"Methods"}},[t._v("Methods "),a("a",{staticClass:"anchor",attrs:{href:"#Methods"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Name")]),t._v(" "),a("th",[t._v("Description")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("blur()")]),t._v(" "),a("td",[t._v("remove focus")])]),t._v(" "),a("tr",[a("td",[t._v("focus()")]),t._v(" "),a("td",[t._v("get focus")])])])])])}],!1,null,null,null);z.options.__file="components/auto-complete/index.en-US.md";var U=z.exports,L="# AutoComplete 自动完成\n 输入框自动完成功能。\n## 何时使用\n需要自动完成时。\n ## 代码演示",$="# AutoComplete\n Autocomplete function of input field.\n## When To Use\nWhen there is a need for autocomplete functionality.\n## Examples\n",R={category:"Components",subtitle:"自动完成",type:"Data Entry",zhType:"数据录入",cols:2,title:"AutoComplete",render:function(){var t=arguments[0];return t("div",[t("md",{attrs:{cn:L,us:$}}),t(c),t(p),t(C),t(f),t(S),t(O),t("api",[t(q,{slot:"cn"}),t(U)])])}},M=Object(l.a)(R,void 0,void 0,!1,null,null,null);M.options.__file="components/auto-complete/demo/index.vue";s.default=M.exports}}]); |