{"id":28959623,"url":"https://github.com/seawind543/rc-autosearchbox","last_synced_at":"2026-04-28T00:31:32.533Z","repository":{"id":96103178,"uuid":"157407097","full_name":"seawind543/rc-autosearchbox","owner":"seawind543","description":"A simple component for build autocomplete with customized menu.","archived":false,"fork":false,"pushed_at":"2024-08-27T22:18:11.000Z","size":1788,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-24T00:03:47.579Z","etag":null,"topics":["autocomplete","customize","keyboard-events","mouse-events","react","touchevent"],"latest_commit_sha":null,"homepage":"https://seawind543.github.io/rc-autosearchbox/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seawind543.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-11-13T16:00:57.000Z","updated_at":"2023-12-01T08:11:03.000Z","dependencies_parsed_at":"2023-03-26T17:22:09.944Z","dependency_job_id":null,"html_url":"https://github.com/seawind543/rc-autosearchbox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/seawind543/rc-autosearchbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seawind543%2Frc-autosearchbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seawind543%2Frc-autosearchbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seawind543%2Frc-autosearchbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seawind543%2Frc-autosearchbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seawind543","download_url":"https://codeload.github.com/seawind543/rc-autosearchbox/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seawind543%2Frc-autosearchbox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32361477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T20:07:02.737Z","status":"ssl_error","status_checked_at":"2026-04-27T20:07:00.910Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["autocomplete","customize","keyboard-events","mouse-events","react","touchevent"],"created_at":"2025-06-24T00:03:23.469Z","updated_at":"2026-04-28T00:31:32.528Z","avatar_url":"https://github.com/seawind543.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React AutoSearchBox\n\nA simple component for build autocomplete with customized menu.\n\nHandle mouse event, keyboard event and touch event. Reference `Usage` part for detail.\n\nDemo: https://seawind543.github.io/rc-autosearchbox/\n\n## Installation\n\n1. Run `npm install` to install required packages.\n2. Run `npm run dev` to launch `webpack-dev-server`.\n3. After step 2, you will see following message output in command console.\n```\nProject is running at http://0.0.0.0:8000/\nwebpack output is served from /\n```\n\n4. It might take some time for webpack to compiled. Please wait for message below output in the command console.\n```\nwebpack: Compiled with warnings.\n```\n\n\u003e Note: To stop the program, just type ```ctrl + c``` in command console.\n\n## Usage\n\n### Search\n\n- Focus on the input-box to trigger **search** / **open** the menu.\n\n### Mouse operations\n\n- Click on menu item to select it and display detail information of the App. The selected App will be add into search history after selected.\n\n- Mouse hover on a menu item will ***activated*** it.\n\n- Will ***close*** menu if areas outside are clicked.\n\n- Will ***clear*** value of the input-box, if click on the clear-button (x) of the input-box.\n\n### keyboard operations\nWhen focus on the search-box, and use following keys to make operations.\n\n- **Enter**: \nFor `search` or `select` item.\n\n\t- Trigger ***search for autocomplete***, in case `No activated item in menu`.\n\t\n\t- ***Select current activated item***, in case `Exist an activated item in menu`.\n\t\n- **ArrowDown** and **ArrowUp**: \nFor `activated` next item.\n\n\t-  Will **display the item's name in search-box** while operation (like Google search). \n\tWill open the menu, in case the menu was closed.\n\n\t- ***Deactivate items*** and ***rollback search-box's value***,  in case go back to the input-box.\n\t\n\t- Could ***loop*** the list and input-box, in case keep trigger/press the key.\n\t\n\t- Will auto-scroll the menu's scrollbar, to ensure next item is into view.\n\t\n- **Delete**\nFor ***deselect the item***, in case the item is `activated`.\n\t- In case there is `No activated item in menu`, then ***normal delete operation*** for input-box will performed (That is, delete character).\n\n- **Escape**\nFor ***close*** the menu.\n\n### Render your own itemTemplate\n\nReference `App` and `SuggestionItem` to know how to use `itemRenderer` props of **AutoSearchBox** to render your own itemTemplate.\n\n- Example (Set render function by `itemRenderer`):\n```javascript\n\u003cAutoSearchBox\n    onSearch={this.actions.handleSearch}\n    menuItems={apps}\n    getItemDisplayedName={this.actions.getItemDisplayedName}\n    getItemUniqueId={this.actions.getItemUniqueId}\n    onSelect={this.actions.handleSelectApp}\n    onDeselect={this.actions.handleDeselectApp}\n    itemRenderer={this.actions.itemRenderer}\n/\u003e\n```\n\n- Example (Set render function by`children` of `AutoSearchBox`):\n```javascript\n\u003cAutoSearchBox\n    onSearch={this.actions.handleSearch}\n    menuItems={apps}\n    getItemDisplayedName={this.actions.getItemDisplayedName}\n    getItemUniqueId={this.actions.getItemUniqueId}\n    onSelect={this.actions.handleSelectApp}\n    onDeselect={this.actions.handleDeselectApp}\n\u003e\n    {(props) =\u003e {\n        const {\n            index,\n            isActive,\n            item,\n            onSelect\n        } = props;\n\n        return (\n                \u003cdiv\n                    className={classNames(\n                        styles.item,\n                        { [styles.active]: isActive }\n                    )}\n                    onClick={(e) =\u003e { onSelect(); }}\n                    role=\"presentation\"\n                \u003e\n                    \u003cdiv className={styles.label}\u003e\n                        {item.name}\n                    \u003c/div\u003e\n                \u003c/div\u003e\n        );\n    }}\n\u003c/AutoSearchBox\u003e\n```\n\n\n## API\n\n```javascript\n    className: PropTypes.string,\n    style: PropTypes.object,\n\n    // className and style for input-box\n    inputClassName: PropTypes.string,\n    inputStyle: PropTypes.object,\n\n    // className and style for menu\n    menuClassName: PropTypes.string,\n    menuStyle: PropTypes.object,\n\n    // placeholder for input-box\n    placeholder: PropTypes.string,\n\n    /*\n     * Callback invoked when search keywords\n     * onSearch(keyword)\n     *\n     * @ keyword\n     * Type: string\n     * Description: keyword for search\n     */\n    onSearch: PropTypes.func.isRequired,\n\n    // The number of milliseconds to throttle call onSearch callBack\n    throttle: PropTypes.number,\n\n    // Array of autocomplete list item's data\n    menuItems: PropTypes.arrayOf(PropTypes.object),\n\n    /*\n     * function for get autocomplete list item's displayed name\n     * getItemDisplayedName(itemData)\n     *\n     * @ itemData\n     * Type: object\n     * Description: The item object in menuItems\n     */\n    getItemDisplayedName: PropTypes.func.isRequired,\n\n    /*\n     * function for get autocomplete list item's unique id for render (as key)\n     * getItemUniqueId(itemData)\n     *\n     * @ itemData\n     * Type: object\n     * Description: The item object in menuItems\n     */\n    getItemUniqueId: PropTypes.func.isRequired,\n\n    /*\n     * A \"plan B\" row renderer for rendering a autocomplete list item\n     * By Default, will take 'children' prop to make render if children is a function\n     * itemRenderer(props)\n     *\n     * @ props.index\n     * Type: number\n     * Description: The array index of target item in list (start from 0)\n     *\n     * @ props.isActive\n     * Type: bool\n     * Description: Specific target item is active or not\n     *\n     * @ props.item\n     * Type: object\n     * Description: Target item's data (The item object in items)\n     *\n     * @ props.onActive\n     * Type: function\n     * Description: Callback invoked when item is activated\n     *\n     * @ props.onSelect\n     * Type: function\n     * Description: Callback invoked when item selected\n     *\n     * @ props.onDeselect\n     * Type: function\n     * Description: Callback invoked when item deselected\n     */\n    itemRenderer: PropTypes.func,\n\n    /*\n     * Callback invoked when a item is selected\n     * onSelect(itemData)\n     *\n     * @ itemData\n     * Type: object\n     * Description: The item object in menuItems\n     */\n    onSelect: PropTypes.func,\n\n    /*\n     * Callback invoked when a item is deselected\n     * onDeselect(itemData)\n     *\n     * @ itemData\n     * Type: object\n     * Description: The item object in menuItems\n     */\n    onDeselect: PropTypes.func\n```\n\n## License\n\n[MIT](https://github.com/seawind543/rc-autosearchbox/blob/master/LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseawind543%2Frc-autosearchbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseawind543%2Frc-autosearchbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseawind543%2Frc-autosearchbox/lists"}