{"id":13422119,"url":"https://github.com/yury-dymov/react-autocomplete-input","last_synced_at":"2025-03-15T10:31:40.578Z","repository":{"id":11244083,"uuid":"68906761","full_name":"yury-dymov/react-autocomplete-input","owner":"yury-dymov","description":"Autocomplete input field for React","archived":false,"fork":false,"pushed_at":"2024-05-15T17:28:09.000Z","size":843,"stargazers_count":200,"open_issues_count":14,"forks_count":65,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-27T14:43:07.082Z","etag":null,"topics":["autocomplete","component","react","widget"],"latest_commit_sha":null,"homepage":"https://yury-dymov.github.io/react-autocomplete-input/","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/yury-dymov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2016-09-22T09:37:18.000Z","updated_at":"2025-01-18T06:01:43.000Z","dependencies_parsed_at":"2024-06-18T14:01:38.417Z","dependency_job_id":"76f14828-5e07-4e53-a17e-a7ac2d6dea7c","html_url":"https://github.com/yury-dymov/react-autocomplete-input","commit_stats":{"total_commits":103,"total_committers":21,"mean_commits":4.904761904761905,"dds":0.6601941747572815,"last_synced_commit":"ce9875bb33bd92da50a11fccdd1eddf33e391ab8"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yury-dymov%2Freact-autocomplete-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yury-dymov%2Freact-autocomplete-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yury-dymov%2Freact-autocomplete-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yury-dymov%2Freact-autocomplete-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yury-dymov","download_url":"https://codeload.github.com/yury-dymov/react-autocomplete-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719112,"owners_count":20336592,"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","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","component","react","widget"],"created_at":"2024-07-30T23:00:37.314Z","updated_at":"2025-03-15T10:31:39.690Z","avatar_url":"https://github.com/yury-dymov.png","language":"JavaScript","funding_links":[],"categories":["UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Form Components"],"readme":"# react-autocomplete-input\nAutocomplete input field for React\n\n[![react-autocomplete-input](https://github.com/yury-dymov/react-autocomplete-input/raw/master/docs/demo.gif)](https://github.com/yury-dymov/react-autocomplete-input)\n\n[![npm version](https://img.shields.io/npm/v/react-autocomplete-input.svg?style=flat)](https://www.npmjs.com/package/react-autocomplete-input)\n[![Downloads](http://img.shields.io/npm/dm/react-autocomplete-input.svg?style=flat-square)](https://npmjs.org/package/react-autocomplete-input)\n[![Build Status](https://img.shields.io/travis/yury-dymov/react-autocomplete-input/master.svg?style=flat)](https://travis-ci.org/yury-dymov/react-autocomplete-input)\n[![Coverage Status](https://coveralls.io/repos/github/yury-dymov/react-autocomplete-input/badge.svg?branch=master)](https://coveralls.io/github/yury-dymov/react-autocomplete-input?branch=master)\n\n# Demo\nDemo and playground are available [here](https://yury-dymov.github.io/react-autocomplete-input/)\n\n# Usage Example\n```JavaScript\nimport TextInput from 'react-autocomplete-input';\nimport 'react-autocomplete-input/dist/bundle.css';\n\n\u003cTextInput options={[\"apple\", \"apricot\", \"banana\", \"carrot\"]} /\u003e\n```\n\n# Multiple Triggers and Options Example\n```JavaScript\nimport TextInput from 'react-autocomplete-input';\nimport 'react-autocomplete-input/dist/bundle.css';\n\n\u003cTextInput trigger={[\"@\", \"@@\"]} options={{\"@\": [\"aa\", \"ab\", \"abc\", \"abcd\"], \"@@\": [\"az\", \"ar\"]}} /\u003e\n```\nHere for trigger `@` first set of options will resolve and for `@@` — second set.\n\n# Features\n* Supports both keyboard and mouse for option selection\n* Supports responsiveness and works on every device\n* Supports lazy-loading and dynamic option list updates\n* Supports all major browsers including IE 8+\n\n# Configurable Props\n*Note*: All props are optional.\n\n## Component : string or func\n#### Default value: `\"textarea\"`\nWidget for rendering input field\n\n## defaultValue : string\n#### Default value: `\"\"`\nInitial text for input\n\n## disabled : boolean\n#### Default value: `false`\nDisables widget, i.e. during form submission\n\n## maxOptions : number\n#### Default value: `6`\nDefines how many options can be listed simultaneously. Show all matched options if maxOptions equals 0.\n\n## onSelect : func\n#### Default value: `() =\u003e {}`\nCallback invoked upon selecting an option. Receives selection value as a parameter.\n\n## changeOnSelect : func\n#### Default value: `(trigger, slug) =\u003e trigger + slug`\nCallback invoked upon selecting an option, will display what the function returns. Receives trigger and selection value as a parameter.\n\n## onRequestOptions : func\n#### Default value: `() =\u003e {}`\nCallback for requesting new options to support lazy-loading. If `requestOnlyIfNoOptions` is true, then `onRequestOptions` called only if no options are currently available. Otherwise `onRequestOptions` is called every time text is changed and `trigger` is found.\n\n```JavaScript\nimport React from 'react';\nimport TextInput from 'react-autocomplete-input';\n\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.handleRequestOptions = this.handleRequestOptions.bind(this);\n\n    this.state = { options: [\"apple\", \"apricot\", \"banana\", \"carror\"] };\n  }\n\n  // text in input is \"I want @ap\"\n  handleRequestOptions(part) {\n    console.log(part);          // -\u003e \"ap\", which is part after trigger \"@\"\n    this.setState({ options: SOME_NEW_OPTION_ARRAY });\n  }\n\n  render() {\n    return \u003cTextInput onRequestOptions={this.handleRequestOptions} options={this.state.options} /\u003e;\n  }\n}\n```\n\n## matchAny: boolean\n#### Default value: false\nIf true, will match options in the middle of the word as well\n\n## offsetX: number\n#### Default value: 0\nPopup horizontal offset\n\n## offsetY: number\n#### Default value: 0\nPopup vertical offset\n\n## options : array\n#### Default value: `[]`\nList of available options for autocomplete\n\n## regex : string\n#### Default value: `^[a-zA-Z0-9_\\-]+$`\nThis regular expression checks if text after `trigger` can be autocompleted or not. I.e. \"@ap\" matches the default regex as \"ap\" matches the regex, therefore library will try to find appropriate option. \"@a$p\" fails to match the regex as there is not \"$\" character in it, therefore library considering this string as irrelevant.\n\n## requestOnlyIfNoOptions : boolean\n#### Default value: `true`\nIf `requestOnlyIfNoOptions` is true, then `onRequestOptions` called only if no options are currently available. Otherwise `onRequestOptions` is called every time text is changed and `trigger` is found.\n\n## spaceRemovers : array\n#### Default value: `[',', '.', '!', '?']`\nBy default, after option is selected, it is inserted with following `spacer`. If user inputs one of the characters from `spaceRemovers` array, then `spacer` is automatically removed. I.e. `@apple ,|` is automatically changed to `@apple, |`, where `|` represents caret.\n\n## spacer : string\n#### Default value: `' '`\nCharacter which is inserted along with the selected option.\n\n## trigger : string\n#### Default value: `'@'`\nCharacter or string, which triggers showing autocompletion option list. '' and '@@' are both valid triggers. Keep in mind that user have to input at least one extra character to make option list available if empty trigger is used.\n\n## minChars: number\n#### Default value: 0\nOnly show autocompletion option list after this many characters have been typed after the trigger character.\n\n## value : string\n#### Default value: `''`\nWidget supports both controlling options: by value and by state. If you explicitly pass `value` prop, you have to update it manually every time `onChange` event is emitted. If you don't pass `value` prop, then widget uses internal state for value manipulation.\n\n## passThroughEnter: boolean\n#### Default value: false\nIf true, then an enter / return keypress is passed on (after being used to autocomplete).\nUseful if you want to have the form submit as soon as a single value is chosen.\n\n## passThroughTab: boolean\n#### Default value: true\nIf true, then an Tab keypress is passed on (after being used to autocomplete) to the next form input.\nElse, it allows users to autocomplete their input with tab and keep typing.\n\n## triggerCaseInsensitive: boolean\n#### Default value: false\nIf true, then the trigger will be searched case-insensitively. E.g. if the trigger is `class=`, then entering `Class=` will also trigger showing the list of autocompletion options.\n\n## triggerMatchWholeWord: boolean\n#### Default value: false\nIf true, do not consider the trigger when it appears as a part of longer word. E.g. if the trigger is `class=` do not show the options menu on `subclass=`. If false, any occurrence of the trigger will open the menu.\n\n# Styles Customization\nBy default styles are defined in `\"react-autocomplete-input/dist/bundle.css\"`, however, you may define your custom styles instead for following entities:\n\n* `ul.react-autocomplete-input`\n* `ul.react-autocomplete-input \u003e li`\n* `ul.react-autocomplete-input \u003e li.active`\n\n# Design Considerations\n1. Native \"Undo\" action is not fully supported. It might be changed in the future but currently there is no out-of-the-box solution, which solves this issue for all browsers at once.\n2. It is considered that list of options will be always small, lets say up to 2000 items. Therefore, options are stored internally as array. If your use-case requires to work with huge lists, I would recommend to reimplement option internal representation as binary search tree instead.\n\n# License\nMIT (c) Yury Dymov\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyury-dymov%2Freact-autocomplete-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyury-dymov%2Freact-autocomplete-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyury-dymov%2Freact-autocomplete-input/lists"}