{"id":21093914,"url":"https://github.com/ctq123/rcsearchselect","last_synced_at":"2025-07-30T09:05:41.744Z","repository":{"id":33183800,"uuid":"154276615","full_name":"ctq123/rcSearchSelect","owner":"ctq123","description":"这是一个React搜索选择控件，支持复杂数据选择回调，选择的数据是一个对象，并且这个对象是用户自定义的，同时支持设值和清空操作。还有一个重要的特性，引入react-virtualized控件，解决上百万数据源场景下渲染卡顿问题","archived":false,"fork":false,"pushed_at":"2022-12-10T16:32:06.000Z","size":1906,"stargazers_count":6,"open_issues_count":24,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-11T05:34:13.137Z","etag":null,"topics":["rc-search-select","rc-searchselect","rcsearchselect","react-components","react-virtualized","search-select","searchselect"],"latest_commit_sha":null,"homepage":"https://github.com/ctq123/rcSearchSelect","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ctq123.png","metadata":{"files":{"readme":"README-en_EN.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-23T06:48:01.000Z","updated_at":"2023-09-02T00:25:02.000Z","dependencies_parsed_at":"2022-08-28T21:21:04.086Z","dependency_job_id":null,"html_url":"https://github.com/ctq123/rcSearchSelect","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ctq123/rcSearchSelect","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctq123%2FrcSearchSelect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctq123%2FrcSearchSelect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctq123%2FrcSearchSelect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctq123%2FrcSearchSelect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctq123","download_url":"https://codeload.github.com/ctq123/rcSearchSelect/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctq123%2FrcSearchSelect/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267842979,"owners_count":24153133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rc-search-select","rc-searchselect","rcsearchselect","react-components","react-virtualized","search-select","searchselect"],"created_at":"2024-11-19T22:14:17.125Z","updated_at":"2025-07-30T09:05:41.693Z","avatar_url":"https://github.com/ctq123.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## English | [简体中文](./README.md) \r\n\r\n# rc-searchselect\r\n\r\nThis is a React search selection control that supports complex data selection callbacks. The selected data is an object, and this object is user-defined and supports setting and emptying operations. There is also an important feature that introduces a react-virtualized control that solves the problem of rendering jams in millions of data source scenarios.\r\n\r\n## React SearchSelect\r\n[![Build Status](https://travis-ci.org/ctq123/rcSearchSelect.svg?branch=master\u0026foo=bar)](https://travis-ci.org/ctq123/rcSearchSelect)\r\n[![NPM version](https://img.shields.io/badge/npm-v5.7.1-green.svg??style=flat)](https://www.npmjs.com/package/rc-searchselect)\r\n[![codecov](https://codecov.io/gh/ctq123/rcSearchSelect/branch/master/graph/badge.svg)](https://codecov.io/gh/ctq123/rcSearchSelect)\r\n\r\n## Demo\r\n![image](https://github.com/ctq123/rcSearchSelect/blob/master/examples/gif/1023.gif)\r\n![image](https://github.com/ctq123/rcSearchSelect/blob/master/examples/gif/1025.gif)\r\n\r\n# install\r\nnpm install rc-searchselect --save-dev\r\n\r\n# Usage\r\n\r\n## sample usage\r\n![image](https://github.com/ctq123/rcSearchSelect/blob/master/examples/gif/1023.gif)\r\n```\r\nmport React from 'react'\r\nimport { SearchSelect } from 'rc-searchselect'\r\n\r\nclass App extends React.Component {\r\n  constructor(props) {\r\n    super(props)\r\n    this.state = {\r\n      obj: null,\r\n      item: null\r\n    }\r\n  }\r\n\r\n  onSelect (item) {\r\n    console.log('select item\u003e\u003e\u003e', item)\r\n    this.setState({\r\n      item\r\n    })\r\n  }\r\n  \r\n  render () {\r\n    const dataList = [\r\n      {code: \"1\", name: 'Jeck', age: 22, sex: 'male' },\r\n      {code: \"2\", name: 'Marry', age: 21, sex: 'female' },\r\n      {code: \"3\", name: 'Alan', age: 18, sex: 'male' },\r\n      {code: \"4\", name: 'Forklin', age: 22, sex: 'female' },\r\n      {code: \"5\", name: 'Lorry', age: 20, sex: 'female' },\r\n      {code: \"6\", name: 'Halen', age: 25, sex: 'female' },\r\n      {code: \"7\", name: 'Selina', age: 24, sex: 'female' },\r\n      {code: \"8\", name: 'Sky', age: 22, sex: 'male' },\r\n      {code: \"9\", name: 'Sam', age: 26, sex: 'male' },\r\n      {code: \"10\", name: 'Gary', age: 22, sex: 'female' }\r\n    ]\r\n    return (\r\n      \u003cdiv style={{width: 300}}\u003e\r\n        \u003cdiv\u003e\r\n          \u003cSearchSelect\r\n            dataSource={dataList}\r\n            onSelect={this.onSelect.bind(this)}\r\n            placeholder=\"input search text\"\r\n            keyField=\"code\"\r\n            labelField=\"name\"\r\n          /\u003e\r\n        \u003c/div\u003e\r\n        \u003cbr/\u003e\r\n        \u003cdiv style={{fontSize: 12, color: '#9E9E9E'}}\u003e选择的数据：{JSON.stringify(this.state.item)}\u003c/div\u003e\r\n      \u003c/div\u003e\r\n    )\r\n  }\r\n}\r\n```\r\n\r\n## more usage\r\n![image](https://github.com/ctq123/rcSearchSelect/blob/master/examples/gif/1025.gif)\r\n\r\n```\r\nmport React from 'react'\r\nimport { SearchSelect } from 'rc-searchselect'\r\n\r\nclass App extends React.Component {\r\n  constructor(props) {\r\n    super(props)\r\n    this.state = {\r\n      obj: null,\r\n      item: null\r\n    }\r\n  }\r\n\r\n  onSelect (item) {\r\n    console.log('select item\u003e\u003e\u003e', item)\r\n    this.setState({\r\n      item\r\n    })\r\n  }\r\n\r\n  setVal () {\r\n    let label = '广东省广州市天河区'\r\n    console.log('set label\u003e\u003e\u003e', label)\r\n    this.setState({\r\n      obj: {id: Date.now(), label}\r\n    })\r\n  }\r\n\r\n  clearVal () {\r\n    console.log('clear value')\r\n    this.setState({\r\n      obj: {id: Date.now(), label: null}\r\n    })\r\n  }\r\n  \r\n  render () {\r\n    const dataList = [\r\n      {id: 1, ids: '100,200,3000', value: '北京,北京市,朝阳区', name: '北京北京市朝阳区',label: '北京北京市朝阳区(100102)',zipCOde: '100102'},\r\n      {id: 2, ids: '101,201,3100', value: '广东省,广州市,天河区', name: '广东省广州市天河区',label: '广东省广州市天河区(510095)',zipCOde: '510095'},\r\n      {id: 3, ids: '102,202,3200', value: '广东省,广州市,越秀区', name: '广东省广州市越秀区',label: '广东省广州市越秀区(510095)',zipCOde: '510095'},\r\n      {id: 4, ids: '103,203,3300', value: '江苏省,南京市,玄武区', name: '江苏省南京市玄武区',label: '江苏省南京市玄武区(210009)',zipCOde: '210009'},\r\n      {id: 5, ids: '104,204,3400', value: '江苏省,苏州市,昆山市', name: '江苏省苏州市昆山市',label: '江苏省苏州市昆山市(215332)',zipCOde: '215332'},\r\n      {id: 6, ids: '105,205,3500', value: '浙江省,浙江省,西湖区', name: '浙江省浙江省西湖区',label: '浙江省杭州市西湖区(310024)',zipCOde: '310024'},\r\n      {id: 7, ids: '106,206,3600', value: '浙江省,杭州市,滨江区', name: '浙江省杭州市滨江区',label: '浙江省杭州市滨江区(310051)',zipCOde: '310051'},\r\n      {id: 8, ids: '107,207,3700', value: '浙江省,浙江省,上城区', name: '浙江省浙江省上城区',label: '浙江省杭州市上城区(310008)',zipCOde: '310008'},\r\n      {id: 9, ids: '108,208,3800', value: '浙江省,浙江省,萧山区', name: '浙江省浙江省萧山区',label: '浙江省杭州市萧山区(311203)',zipCOde: '311203'},\r\n      {id: 10, ids: '109,209,3900', value: '浙江省,浙江省,余杭区', name: '浙江省浙江省余杭区',label: '浙江省杭州市余杭区(311100)',zipCOde: '311100'}\r\n    ]\r\n    return (\r\n      \u003cdiv style={{width: 300, marginTop: 400, marginLeft: 200}}\u003e\r\n        \u003cdiv\u003e\r\n          \u003cSearchSelect\r\n            dataSource={dataList}\r\n            onSelect={this.onSelect.bind(this)}\r\n            setValueObj={this.state \u0026\u0026 this.state.obj}\r\n            placeholder=\"input search text\"\r\n            keyField=\"id\"\r\n            labelField=\"label\"\r\n            direction='up'\r\n          /\u003e\r\n        \u003c/div\u003e\r\n        \u003cbr/\u003e\r\n        \u003cbutton onClick={this.setVal.bind(this)}\u003e设定\u003c/button\u003e\r\n        \u003cbutton onClick={this.clearVal.bind(this)}\u003e重置\u003c/button\u003e\r\n        \u003cbr /\u003e\r\n        \u003cdiv style={{fontSize: 12, color: '#9E9E9E'}}\u003e选择的数据：{JSON.stringify(this.state.item)}\u003c/div\u003e\r\n      \u003c/div\u003e\r\n    )\r\n  }\r\n}\r\n```\r\n# Prop Types\r\n\r\nprops | description | type | default | isRequire\r\n---|---|---|---|--\r\ndataSource | the data source | array | [] | Y\r\nkeyField | the data source object unique field，e.g ID | string | '' | Y\r\nlabelField | the data source object field, the displayed field in the drop-down box | string | '' | Y\r\nonSelect | the selected callback function | function | (e)=\u003e{} | N\r\ndefaultValue | default value | object | null | N\r\nsetValueObj | set the value object, used to set or clear the operation, must contain {id, label} two fields, only the current operation (set value or empty) will take effect when the id changes, id is best set to timestamp, e.g the clear operation {id: Date.now(), label: '' } | object | null | N\r\nonChange | the input box change callback function | function | (e)=\u003e{} | N\r\ndirection | the display position of the drop-down box, above or below the input box | enum['up','down'] | 'down' | N\r\nplaceholder | the placeholder of the component | string | '' | N\r\ndropdwonHeight | the maximum height of the drop-down list | number | 200 | N\r\nisSensitiveCase | is it case sensitive when searching for letters | bool | True | N","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctq123%2Frcsearchselect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctq123%2Frcsearchselect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctq123%2Frcsearchselect/lists"}