(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}}]);