{"id":14981117,"url":"https://github.com/anishmprasad/redux-typeahead","last_synced_at":"2026-01-29T21:31:49.481Z","repository":{"id":54670100,"uuid":"93405844","full_name":"anishmprasad/redux-typeahead","owner":"anishmprasad","description":"Typeahead component with react-redux ","archived":false,"fork":false,"pushed_at":"2023-03-27T17:20:38.000Z","size":60,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T21:44:33.426Z","etag":null,"topics":["react","redux-typeahead","typeahead","typeahead-component"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anishmprasad.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}},"created_at":"2017-06-05T13:19:11.000Z","updated_at":"2023-04-11T15:20:41.000Z","dependencies_parsed_at":"2024-09-12T12:03:01.215Z","dependency_job_id":null,"html_url":"https://github.com/anishmprasad/redux-typeahead","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Fredux-typeahead","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Fredux-typeahead/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Fredux-typeahead/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Fredux-typeahead/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anishmprasad","download_url":"https://codeload.github.com/anishmprasad/redux-typeahead/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242078507,"owners_count":20068561,"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":["react","redux-typeahead","typeahead","typeahead-component"],"created_at":"2024-09-24T14:02:56.372Z","updated_at":"2026-01-29T21:31:49.465Z","avatar_url":"https://github.com/anishmprasad.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-typeahead\r\nTypeahead Component for React ES6 and Redux\r\n\r\nTypeahead, written using the Redux and React ES6 library.\r\n==============================================\r\n\r\n\r\nFeatures\r\n========\r\n* Typeahead with React15 with ES6 Support\r\n* Typeahead with Elasticsearch client Support (using elasticsearch package)\r\n* Redux Support\r\n\r\n\r\n\r\nGetting started\r\n---------------\r\n\r\nIf you're developing using npm and CommonJS modules:\r\n```\r\nnpm i redux-typeahead\r\n```\r\n```jsx\r\nReact.render(\r\n    // Pass in the desired props\r\n    \u003cTypeahead\r\n        inputValue = {this.state.inputValue}\r\n        onChange={ this.handleChange }\r\n        onComplete={this.handleComplete}\r\n        handleHint={this.handleHint}\r\n        options={this.state.options}\r\n        optionTemplate={Template}\r\n        onOptionChange={this.handleOptionChange}\r\n        onOptionClick={this.handleOptionClick}\r\n            \r\n    /\u003e,\r\n\r\n    // Render Typeahead into the container of your choice.\r\n    document.body\r\n);\r\n```\r\n\r\nYou may also want to download one of the distributions from the `dist` folder, and load it in the browser that way. A global variable named `Typeahead` will be available to use.\r\n\r\n\r\nWebpack Configuration File\r\n--------------------------\r\n\r\nWhile importing module to allow module to babelify you can use this configuration to fix the issue with `You may need an appropriate loader to handle this file type` in terminal while run. in these case you can add `exclude: /node_modules\\/(?!(redux-typeahead)\\/).*/` in `webpack.config.js` \r\n\r\n\r\n```js\r\n\r\nmodule: {\r\n    loaders: [\r\n      {\r\n        test: /\\.js$/,\r\n        exclude: /node_modules\\/(?!(redux-typeahead)\\/).*/,\r\n        loader: 'babel-loader',\r\n        query: {\r\n          presets: ['es2015', 'react'],\r\n          plugins: [['react-transform', {\r\n            transforms: [{\r\n              transform: 'react-transform-hmr',\r\n              imports: ['react'],\r\n              locals: ['module']\r\n            }],\r\n          }]],\r\n        },\r\n      },\r\n    ],\r\n  }\r\n  \r\n  \r\n```\r\n\r\n\r\n\r\n\r\n\r\nClass names\r\n-----------\r\n\r\nThese are some default classes names provided by the component. You may override and provide your own styling.\r\n\r\n**react-typeahead-container**\r\n  * A `div` element containing the entire Typeahead.\r\n\r\n**react-typeahead-input-container**\r\n  * A `div` element containing the usertext and hint.\r\n\r\n**react-typeahead-usertext**\r\n  * An `input` element containing the usertext.\r\n\r\n**react-typeahead-hint**\r\n  * An `input` element containing the hint.\r\n\r\n**react-typeahead-options**\r\n  * A `ul` element containing the rendered list of options.\r\n\r\nAvailable props:\r\n----------------\r\n\r\n#### *ReactElement* optionTemplate ***required***\r\nThis determines how to render each option. It is required. It should a reference to a ReactElement. It is instantiated for every item in `options`.\r\n\r\nWhen instantiated, it is passed these props:\r\n\r\n * `index` - The position of this option in the `options` list.\r\n * `data` - The raw data of this option.\r\n * `userInputValue` - The value the user has **actually typed**.\r\n * `inputValue` - Typeahead's current input value. Note: this may be different than `userInputValue`.\r\n * `isSelected` - Is this option currently selected? This will be `true` on when hovered over, or arrowed to.\r\n\r\n**Example**:\r\n\r\n```jsx\r\nlet client = new elasticsearch.Client({\r\n    host: '[API_URL]',\r\n    log: 'trace'\r\n})\r\nclass Template extends React.Component{\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\t\r\n\t}\r\n    render() {\r\n        let classes = cx({\r\n            'yt-option': true,\r\n            'yt-selected-option': this.props.isSelected\r\n        });\r\n        return (\r\n            \u003cdiv className={classes}\u003e\r\n                {this.renderOption()}\r\n            \u003c/div\u003e\r\n        );\r\n    }\r\n    renderOption() {\r\n        var optionData = this.props.data,\r\n            inputValue = this.props.userInputValue;\r\n        if (optionData.indexOf(inputValue) === 0) {\r\n            return (\r\n                \u003cspan\u003e\r\n                    {inputValue}\r\n                    \u003cstrong\u003e\r\n                        {optionData.slice(inputValue.length)}\r\n                    \u003c/strong\u003e\r\n                \u003c/span\u003e\r\n            );\r\n        }\r\n        return optionData;\r\n    }\r\n}\r\nTemplate.propTypes = {\r\n    data: PropTypes.any,\r\n    inputValue: PropTypes.string,\r\n    isSelected: PropTypes.bool\r\n}\r\n\r\nclass Search extends React.Component{\r\n    constructor(props) {\r\n        super(props);\r\n        this.handleChange = this.handleChange.bind(this);\r\n        this.handleComplete = this.handleComplete.bind(this);\r\n        this.handleHint = this.handleHint.bind(this);\r\n        this.handleOptionChange = this.handleOptionChange.bind(this);\r\n        this.handleOptionClick = this.handleOptionClick.bind(this);\r\n        this.setInputValue = this.setInputValue.bind(this);\r\n        this.getOptions = this.getOptions.bind(this);\r\n        this.handleStoreChange = this.handleStoreChange.bind(this);\r\n        this.state = {\r\n            results: [],\r\n            inputValue: '',\r\n            options: []\r\n        }\r\n    }\r\n    componentWillMount() {\r\n        window.hint= [];\r\n    }\r\n    handleChange ( event ) {\r\n        let value = event.target.value;\r\n        this.setInputValue(value);\r\n        const search_query = event.target.value\r\n        client.search({\r\n            query: search_query,\r\n            output:\"JSON\"\r\n        }).then(function ( body ) {\r\n            if(body.success == true){\r\n                for (var key in body.results) {\r\n                  hint.push(body.results[key].name);\r\n                }\r\n                hint = hint.filter(function(n){ return n != undefined }); \r\n                hint = hint.slice(1,10)\r\n                this.setState({ options: hint })\r\n                this.setState({ results: body.results })\r\n            }\r\n        }.bind(this), function ( error ) {\r\n            console.trace( error.message );\r\n        });\r\n    }\r\n    handleComplete(event, completedInputValue) {\r\n        this.setState({\r\n            inputValue: completedInputValue\r\n        });\r\n    }\r\n    handleHint(inputValue, options) {\r\n        if (new RegExp('^' + inputValue).test(options[0])) {\r\n            return options[0];\r\n        }\r\n        return '';\r\n    }\r\n    handleOptionChange(event, option) {\r\n        this.setInputValue(option);\r\n    }\r\n    handleOptionClick(event, option) {\r\n        this.setInputValue(option);\r\n    }\r\n\r\n    setInputValue(value) {\r\n        this.setState({\r\n            inputValue: value\r\n        });\r\n    }\r\n    handleStoreChange(newOptions) {\r\n        this.setState({\r\n            options: newOptions\r\n        });\r\n    }\r\n    render () {\r\n        return (\r\n            \u003cdiv className=\"container\"\u003e\r\n                \u003cTypeahead\r\n                \tinputValue = {this.state.inputValue}\r\n                    onChange={ this.handleChange }\r\n                    onComplete={this.handleComplete}\r\n                    handleHint={this.handleHint}\r\n                    options={this.state.options}\r\n                    optionTemplate={Template}\r\n                    onOptionChange={this.handleOptionChange}\r\n                    onOptionClick={this.handleOptionClick}\r\n            \r\n                /\u003e\r\n                \u003cSearchResults results={ this.state.results } /\u003e\r\n            \u003c/div\u003e\r\n        )\r\n    }\r\n}\r\nclass SearchResults extends React.Component{\r\n\tconstructor(props) {\r\n\t\tsuper(props);\t\r\n\t}\r\n    SearchResults () {\r\n        return { results: [] }\r\n    }\r\n    render () {\r\n        return (\r\n            \u003cdiv className=\"search_results\"\u003e\r\n                \u003cdiv\u003e\r\n                {                         \r\n                          this.props.results.map((post,i) =\u003e\r\n                            \u003cdiv\u003e\r\n                              \u003ch3 key={i}\u003e{post.name}\u003c/h3\u003e\r\n                                {post.key.map((option,p) =\u003e \r\n                                \u003cdiv key={p}\u003e\r\n                                  \u003cp key={option.cta}\u003e{option.cta}\u003c/p\u003e\r\n                                  \u003cp key={option.sort_bit}\u003e{option.sort_bit}\u003c/p\u003e\r\n                                  \u003cp key={option.type}\u003e{option.type}\u003c/p\u003e\r\n                                  \u003cp key={option.url}\u003e{option.url}\u003c/p\u003e\r\n                                \u003c/div\u003e\r\n                                )}\r\n                            \u003c/div\u003e\r\n                          )\r\n\r\n             \t}\r\n                \u003c/div\u003e\r\n            \u003c/div\u003e\r\n        )\r\n    }\r\n}\r\nSearchResults.propTypes = {\r\n    results: PropTypes.array\r\n}\r\n```\r\n#### *string* inputId ***optional***\r\nThis input id is used for the Typeahead's input element.\r\n\r\nFor example, this allows us to associate a label with the Typeahead's input element. Screen readers will then be able to read the label once the Typeahead is focused.\r\n\r\n```jsx\r\n\u003clabel for=\"message-to-field\"\u003eTo\u003c/label\u003e\r\n\r\n\u003cTypeahead\r\n    inputId=\"message-to-field\"\r\n    ...\r\n/\u003e\r\n```\r\n\r\n#### *string* inputName ***optional***\r\n* This input name is used for the Typeahead's input element. Useful if the Typeahead happens to be inside of a `form` element.\r\n\r\n#### *string* className ***optional***\r\n* This class name is used for the Typeahead's container.\r\n\r\n#### *string* inputValue ***optional***\r\n* The input element's `value` attribute. **NOTE**: You must pass this prop to Typeahead display the value. You have control of the current input value.\r\n\r\n#### *array* options ***optional***\r\n* These options are used when rendering the options list. It can contain data of any type.\r\n\r\n#### *boolean* autoFocus ***optional***\r\n* If true, the input element is focused on the initial render.\r\n\r\n#### *string* placeholder ***optional***\r\n* The input element's `placeholder` attribute.\r\n\r\n#### *string* hoverSelect ***optional***\r\n* By default, hovering over an option causes it to be selected.\r\n\r\n#### *function* onComplete(*event*, *completedInputValue*) ***optional***\r\nFires when the user is attempting to complete the input element's hint. If there is no hint, it will not be called.\r\n\r\nThis function is called when the user presses the `ArrowRight`, `Tab`, or `End` keys. `ArrowLeft` is used instead of `ArrowRight` **if** the input value is RTL.\r\n\r\n**Example**:\r\n\r\n```jsx\r\nhandleComplete: function(event, completedInputValue) {\r\n    this.setState({\r\n        inputValue: completedInputValue\r\n    });\r\n}\r\n\r\n\u003cTypeahead\r\n    inputValue={this.state.inputValue}\r\n    onComplete={this.handleComplete}\r\n/\u003e\r\n```\r\n\r\n#### *function* onDropdownOpen() ***optional***\r\n* Fires when the dropdown is opened. The dropdown opens as soon as something is typed, or up/down arrow keys are pressed, or when the input is focused.\r\n\r\n#### *function* onDropdownClose() ***optional***\r\n* Fires when the dropdown is closed. The dropdown may be closed when `Escape` or `Enter` is pressed, or if any option is clicked on, or if anywhere outside the Typeahead is clicked.\r\n\r\n#### *function* onChange(*event*) ***optional***\r\n* Fires when a change occurs on the input element.\r\n\r\n#### *function* onInputClick(*event*) ***optional***\r\n* Fires when the input element is clicked.\r\n\r\n#### *function* onKeyDown(*event*, optionData, selectedIndex) ***optional***\r\nFires when a key down occurs on the input element.\r\nIt is also passed the currently selected option, and its index.\r\nIf no option is selected, `optionData` is the input value, and `selectedIndex` is `-1`.\r\n\r\n#### *function* onKeyPress(*event*) ***optional***\r\n* Fires when a key press occurs on the input element.\r\n\r\n#### *function* onKeyUp(*event*) ***optional***\r\n* Fires when a key up occurs on the input element.\r\n\r\n#### *function* onFocus(*event*) ***optional***\r\n* Fires when the input element is focused.\r\n\r\n#### *function* onBlur(*event*) ***optional***\r\n* Fires when the input element is blurred.\r\n\r\n#### *function* onSelect(*event*) ***optional***\r\n* Fires when the input element's text is selected.\r\n\r\n#### *function* onOptionClick(*event*, optionData, index) ***optional***\r\n* Fires when an option is clicked. `optionData` is the option that was clicked.\r\n\r\n#### *function* onOptionChange(*event*, optionData, index) ***optional***\r\n* Fires when the user arrows up or down to an option. It is also called if the user arrows back to the input element, and in that case `index` is `-1`. `optionData` is the option, or input text, data that has been navigated to.\r\n\r\n#### *function* handleHint(inputValue, options) ***optional***\r\nThis function determines what the hint is. It is called whenever the input has changed. If a hint is considered available, it should return the entire string, otherwise return a default string.\r\n\r\n**Example**:\r\n\r\n```jsx\r\nhandleHint: function(inputValue, options) {\r\n    // If the current input value matches the first option,\r\n    // return that option. It will be used to display the hint.\r\n    if (new RegExp('^' + inputValue).test(options[0].first_name)) {\r\n\r\n        // This must return a string!\r\n        return options[0].first_name;\r\n    }\r\n\r\n    // No hint is available.\r\n    return '';\r\n}\r\n\r\n// Now pass it as a prop...\r\n\u003cTypeahead\r\n    handleHint={this.handleHint}\r\n/\u003e\r\n```\r\n\r\n#### *function* getMessageForOption(*optionData*) ***optional***\r\nThis is for accessibility. It is called when an option is clicked or arrowed to. `optionData` is the option we're currently on. The return value is then read by the screen reader. It is also called if the user arrows back to the input element. The string returned should be localized so it is read in the correct language.\r\n\r\n```js\r\ngetMessageForOption: function(optionData) {\r\n\r\n    switch (optionData.type) {\r\n    case 'PERSON':\r\n        return 'Search for the person ' + optionData.name;\r\n\r\n    case 'PLACE':\r\n        return 'Search for the place ' + optionData.name;\r\n\r\n    default:\r\n        return 'Search for the thing ' + optionData.name;\r\n    }\r\n}\r\n```\r\n\r\n#### *function* getMessageForIncomingOptions() ***optional***\r\nThis is for accessibility. It is called when a new set of options is passed into Typeahead. The return value is then read by the screen reader. The string returned should be localized so it is read in the correct language.\r\n\r\n```js\r\ngetMessageForIncomingOptions: function() {\r\n    return 'There are new options available. Use the up and down arrows to navigate.';\r\n}\r\n```\r\n\r\nDon't see your prop? explaining your use case, and I will add it.\r\n\r\nPackages Needed\r\n---------------\r\n* elasticsearch : ^10.1.3\r\n* prop-types : ^15.5.4\r\n* classnames : ^2.1.1\r\n* react : ^15.4.2\r\n* react-dom : ^15.4.2\r\n* redux: ^3.6.0\r\n\r\n\r\nIssues\r\n------\r\nPlease [file an issue](https://github.com/Anishmprasad/redux-typeahead/issues) if you find a bug, or need help.\r\n\r\n\r\nLicense\r\n-------\r\nThe MIT License (MIT)\r\n\r\nCopyright (c) 2024 Anish M Prasad\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanishmprasad%2Fredux-typeahead","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanishmprasad%2Fredux-typeahead","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanishmprasad%2Fredux-typeahead/lists"}