{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<h3 id=\"When To Use\">When to use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>search data in forms or pages.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Search\">Search <a class=\"header-anchor scroll-count-item\" href=\"#Search\" data-scroll-id=\"Search\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>size</td>\n<td>-</td>\n<td>&apos;large&apos; | &apos;medium&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>-</td>\n<td>string | number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>-</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Default hint</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>autoWidth</td>\n<td>-</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>label</td>\n<td>-</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>hasClear</td>\n<td>Show clear button</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>state</td>\n<td>-</td>\n<td>&apos;error&apos; | &apos;loading&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>readOnly</td>\n<td>-</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disabled or not</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Is popupContent displayed</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>-</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>-</td>\n<td>(visible: boolean) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>-</td>\n<td>string | HTMLElement | ((target: HTMLElement) =&gt; HTMLElement)</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>-</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>-</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>-</td>\n<td>PopupProps</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContent</td>\n<td>Custom popup content</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>filterLocal</td>\n<td>-</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>filter</td>\n<td>Filter</td>\n<td>SelectProps[&apos;dataSource&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>useVirtual</td>\n<td>-</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>dataSource</td>\n<td>Dropdown menu dataSource</td>\n<td>AutoCompleteProps[&apos;dataSource&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>itemRender</td>\n<td>-</td>\n<td>(item: Item) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when value changes</td>\n<td>AutoCompleteProps[&apos;onChange&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>fillProps</td>\n<td>The key of the value filled in the selection box, the default is value</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>-</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>shape</td>\n<td>Shape</td>\n<td>&apos;normal&apos; | &apos;simple&apos;</td>\n<td>&apos;normal&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>type</td>\n<td>-</td>\n<td>&apos;primary&apos; | &apos;secondary&apos; | &apos;normal&apos; | &apos;dark&apos;</td>\n<td>&apos;normal&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>onSearch</td>\n<td>Callback when search button clicked</td>\n<td>(value: string, filterValue?: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultFilterValue</td>\n<td>DefaultFilterValue</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>filterValue</td>\n<td>FilterValue</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onFilterChange</td>\n<td>Callback when filter changes</td>\n<td>(filter: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>searchText</td>\n<td>SearchText</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>filterProps</td>\n<td>FilterProps</td>\n<td>SelectProps</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>buttonProps</td>\n<td>Props for Button</td>\n<td>ButtonProps</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>hasIcon</td>\n<td>Show find button</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>icons</td>\n<td>Configurable icons, including search, etc</td>\n<td>{<br> search?: React.ReactNode;<br> }</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Follow Trigger or not</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>autoHighlightFirstItem</td>\n<td>Whether to automatically highlight the first element</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onToggleHighlightItem</td>\n<td>Callback for keyboard up and down keys to switch menu highlighted options</td>\n<td>AutoCompleteProps[&apos;onToggleHighlightItem&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"Search Inner Methods Got By Refs\">Search Inner Methods(Got by refs) <a class=\"header-anchor scroll-count-item\" href=\"#Search Inner Methods Got By Refs\" data-scroll-id=\"Search Inner Methods Got By Refs\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Descripiton</th>\n<th>Type</th>\n<th>Default Value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>focus</td>\n<td>get foucs<br><br><strong>signature</strong>:<br> Function(start:Number, end: Number)<br><strong>params</strong>:<br><em>start</em>: {Number} cursor postion<br><em>end</em>: {Number} select end postion</td>\n<td>Function</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">KeyBoard</th>\n<th style=\"text-align:left\">Descripiton</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Tab</td>\n<td style=\"text-align:left\">Trigger the onSearch event</td>\n</tr>\n</tbody>\n</table>\n"}