React选择组件(支持拼音搜索)
本项目fork自react-select-pinyin,基于react-select开发。
相对于react-select,添加了以下特性:
- 支持输入中文匹配(如 北, 京 会匹配北京市)
- 支持输入全拼匹配(如 beijingshi, beijing, beij, b 会匹配北京市)
- 支持输入首字母匹配(如 bjs, bj, b 会匹配北京市)
- 支持非开始位置的匹配(如 jingshi, ijins, eij 会匹配北京市)
- ***不支持***子串匹配(如 beishi ***不会***匹配北京市)
相对于react-select-pinyin,添加了以下特性:
- 升级react到0.14
- 纯函数组件
- 使用
ES2015
语法 - 更换拼音处理库为pinyinlite,更轻量、效率更佳、更适合浏览器使用
Live Demo
https://javascript-ninja.github.io/react-pinyin-select
安装
npm install react-pinyin-select-2 --save
使用方式
直接 require
或 import
使用即可,具体的 api 和 react-select 一致:
; const options = value: '110100' label: '北京市' value: '120100' label: '天津市' ; { console;} <PinyinSelect name="form-field-name" value="one" options=options onChange=logChange/>
默认的 css 在 lib/default.css
中,如果你使用webpack
之类的构建工具并配置了对应的loader
,可以这样使用:
; // CommonJS ; // ES2015
否则请按照你项目中插入 css 的方式自行取用。