IE 10+ ✔
Chrome 31.0+ ✔
Firefox 31.0+ ✔
Opera 30.0+ ✔
Safari 7.0+ ✔
xy-autocomplete
联想输入组件。
特性
安装
# yarn
yarn add xy-autocomplete
使用例子
import React from " react" ;
import ReactDOM from " react-dom" ;
import AutoComplete from " xy-autocomplete" ;
const mockData = [
{ label: " 三全鲜食(北新泾店)" , value: " 长宁区新渔路144号" },
{ label: " Hot honey 首尔炸鸡(仙霞路)" , value: " 上海市长宁区淞虹路661号" },
{ label: " 新旺角茶餐厅" , value: " 上海市普陀区真北路988号创邑金沙谷6号楼113" },
];
ReactDOM .render (<AutoComplete dataSource = { mockData } />, container );
API
AutoComplete
属性
说明
类型
默认值
children
自定义 Input 搜索框
React.ReactNode
无
popupClassName
弹出内容类名
string
无
stretch
下拉列表是否宽度与输入框宽度对齐
boolean
true
backfill
是否键盘输入完再回填
boolean
false
empyPlaceholder
内容占位符, 下拉内容为空时提示文本
string
无
filter
过滤 option 本, 返回 true 则过滤
(cfg: OptionConfig, search: string) => boolean
无
delay
防抖毫秒
number
200
dataSource
数据源
OptionConfig[] / string[] / React.ReactNode
无
customItem
自定义渲染
(props: CustomItemProps) => JSX.Element
无
onChange
改变回调, 搜索内容改变和选中建议选项都会触发
(value: string) => void
无
onSearch
搜索回调, 搜索内容改变触发
(value: string) => void
无
onSelect
选择回调, 选中建议选项都会触发
(value: string, cfg: OptionConfig) => void
无
AutoCompleteInput
属性
说明
类型
默认值
disabled
是否禁用
boolean
false
value
输入框值
string
无
defaultValue
输入框默认值
string
无
placeholder
占位符文本
string
无
autoFocus
自动焦点
boolean
无
onFocus
输入框焦点事件
(e: React.FocusEvent) => void
无
onBlur
输入框失去焦点事件
(e: React.FocusEvent) => void
无
onKeyDown
键盘事件
(e: React.KeyboardEvent) => void
无
onChange
输入框 change 事件
(value: string, event?: React.ChangeEvent) => void
无
onCompositionStart
开始输入中文
(e: React.CompositionEvent) => void
无
onCompositionEnd
输入中文完毕
(e: React.CompositionEvent) => void
无
开发
例子
http://localhost:6006
测试
yarn run test
开源许可
xy-autocomplete is released under the MIT license.