Xy-autocomplete NPM


IE 10+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

NPM version npm download

xy-autocomplete

联想输入组件。

特性

支持方向键上下导航，并且跳过禁用的。
支持 backfill 盘输入完再回填, 对中文输入很有效。
支持过滤 Option。
设置 delay 节流毫秒
自定义渲染选项
自定义输入框组件

安装

# 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	无