react-select-pinyin

React 选择控件（支持拼音搜索）

---

JedWatson 的 react-select 挺好用，但是不支持拼音搜索。

react-select-pinyin 基于 react-select 开发，添加了如下特性：

• 支持输入全拼匹配（如 beijingshi, beijing, beij, b 会匹配北京市）
• 支持输入首字母匹配（如 bjs, bj, b 会匹配北京市）
• 支持非开始位置的匹配（如 jingshi, ijins, eij 会匹配北京市）
• ***不支持***子串匹配（如 beishi ***不会***匹配北京市）

Live Demo

http://xcatliu.github.io/react-select-pinyin/

使用方式

CommonJS

若你的项目是基于 CommonJS 风格的，则直接 require 使用即可，具体的 api 和 react-select 一样：

var Select = require('react-select-pinyin');
 
var options = [
  { value: '110100', label: '北京市' },
  { value: '120100', label: '天津市' }
];
 
function logChange(val) {
  console.log("选择了: " + val);
}
 
<Select
  name="form-field-name"
  value="one"
  options={options}
  onChange={logChange}
/>

默认的 css 在 lib/default.css 中，请按照你项目中插入 css 的方式自行取用。

AMD

暂不支持

直接在 script 标签中引入

暂不支持

更多使用方式

更多使用方式请参考：react-select#usage

开发

clone 之后，进入本项目，执行：

npm install
npm start

打开 http://localhost:8000 查看示例。

编辑 src 和 example 进行开发。

发布新版本流程

1. 执行 npm run lint 执行 eslint 检查
2. 执行 npm run prepublish 将 src 中的 jsx 编译成 lib 中的 js，并且会复制 react-select 中的 css 到 lib
3. 执行 npm version [<newversion> | major | minor | patch | prerelease | preminor | premajor ] 升级版本号
4. 执行 git push && git push --tags 提交到 GitHub
5. 执行 npm publish 发布到 npmjs.com
6. 执行 npm run gh-pages 更新 gh-pages 分支