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 一致：

import PinyinSelect from 'react-pinyin-select';
 
const options = [
  { value: '110100', label: '北京市' },
  { value: '120100', label: '天津市' }
];
 
function logChange(val, option) {
  console.log(val, option);
}
 
<PinyinSelect
  name="form-field-name"
  value="one"
  options={options}
  onChange={logChange}
/>

默认的 css 在 lib/default.css 中，如果你使用webpack之类的构建工具并配置了对应的loader，可以这样使用：

require ('react-pinyin-select/lib/default.css'); // CommonJS
 
import 'react-pinyin-select/lib/default.css'; // ES2015

否则请按照你项目中插入 css 的方式自行取用。