{"id":18645365,"url":"https://github.com/chototoss/search-suggestion","last_synced_at":"2025-04-11T12:31:21.292Z","repository":{"id":26894542,"uuid":"109964615","full_name":"ChoTotOSS/search-suggestion","owner":"ChoTotOSS","description":"🔍  Simple, lightweight, flexible search suggestion, autocomplete component 🔍","archived":false,"fork":false,"pushed_at":"2022-12-07T17:21:17.000Z","size":1247,"stargazers_count":15,"open_issues_count":69,"forks_count":2,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-25T13:46:33.124Z","etag":null,"topics":["autocomplete","autoselect","combobox","function-as-child","react","suggestions"],"latest_commit_sha":null,"homepage":"https://chototoss.github.io/search-suggestion/","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/ChoTotOSS.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}},"created_at":"2017-11-08T11:02:23.000Z","updated_at":"2025-02-11T15:49:51.000Z","dependencies_parsed_at":"2023-01-14T08:30:34.655Z","dependency_job_id":null,"html_url":"https://github.com/ChoTotOSS/search-suggestion","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/ChoTotOSS%2Fsearch-suggestion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChoTotOSS%2Fsearch-suggestion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChoTotOSS%2Fsearch-suggestion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChoTotOSS%2Fsearch-suggestion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChoTotOSS","download_url":"https://codeload.github.com/ChoTotOSS/search-suggestion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248401955,"owners_count":21097328,"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","autoselect","combobox","function-as-child","react","suggestions"],"created_at":"2024-11-07T06:15:40.942Z","updated_at":"2025-04-11T12:31:20.821Z","avatar_url":"https://github.com/ChoTotOSS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/6290720/32546955-46d0fb54-c4b3-11e7-9a92-d96fb2b7b1ad.png\" alt=\"downshift logo\" title=\"downshift logo\" width=\"250\"\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n[![Build Status](https://travis-ci.org/ChoTotOSS/search-suggestion.svg?branch=master)](https://travis-ci.org/ChoTotOSS/search-suggestion)\n[![codecov](https://codecov.io/gh/ChoTotOSS/search-suggestion/branch/master/graph/badge.svg)](https://codecov.io/gh/ChoTotOSS/search-suggestion)\n[![npm version](https://badge.fury.io/js/search-suggestion.svg)](https://badge.fury.io/js/search-suggestion)\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/ChoTotOSS/search-suggestion/blob/master/LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n# Search Suggestion\n\nSimple lightweight search suggestion component. This component was inspired by\n[downshift (paypal)](https://github.com/paypal/downshift) component.\n\nThe component applied `Function as Child Components` pattern. You can read more\nabout this pattern\n[here](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9)\n\n## Table content\n\n* [Installation](https://github.com/ChoTotOSS/search-suggestion#installation)\n* [Usage](https://github.com/ChoTotOSS/search-suggestion#usage)\n* [Examples](https://github.com/ChoTotOSS/search-suggestion#examples)\n* [Props](https://github.com/ChoTotOSS/search-suggestion#props)\n* [Child callback functions](https://github.com/ChoTotOSS/search-suggestion#child-callback-functions)\n* [Actions](https://github.com/ChoTotOSS/search-suggestion#actions)\n* [States](https://github.com/ChoTotOSS/search-suggestion#states)\n* [Showcase](https://github.com/ChoTotOSS/search-suggestion#showcase)\n* [Alternatives](https://github.com/ChoTotOSS/search-suggestion#alternatives)\n\n## Installation\n\n```bash\nnpm install --save search-suggestion\n```\n\nor\n\n```bash\nyarn add search-suggestion\n```\n\n## Usage\n\nYou can check out the basic demo here:\n[https://codesandbox.io/s/n45j5zjwyj](https://codesandbox.io/s/n45j5zjwyj)\n\n```js\nimport React, { Component } from 'react';\nimport { render } from 'react-dom';\nimport Suggestion from 'search-suggestion';\n\nconst items = ['apple', 'pear', 'orange', 'grape', 'banana'];\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      dataSource: []\n    };\n  }\n\n  handleChange = e =\u003e {\n    const value = e.target.value;\n    let dataSource = [];\n    if (value) {\n      dataSource = items.filter(item =\u003e item.toLowerCase().includes(value.toLowerCase()));\n    }\n    this.setState({\n      dataSource\n    });\n  };\n\n  render() {\n    return (\n      \u003cSuggestion\n        getDisplayName={item =\u003e item}\n        items={this.state.dataSource}\n        onSelectedItem={item =\u003e alert(item)}\n      \u003e\n        {({\n          getInputProps,\n          getListItemProps,\n          getItemProps,\n          inputValue,\n          selectedItem,\n          highlightedIndex,\n          items,\n          isOpen,\n          clearInputValue\n        }) =\u003e (\n          \u003cdiv\u003e\n            \u003cp\u003eselected item: {selectedItem}\u003c/p\u003e\n            \u003cinput\n              {...getInputProps({\n                placeholder: 'Select fruit',\n                onChange: this.handleChange\n              })}\n            /\u003e\n            {isOpen \u0026\u0026 (\n              \u003cdiv {...getListItemProps()}\u003e\n                {items.map((item, index) =\u003e (\n                  \u003cdiv\n                    {...getItemProps({ item, index })}\n                    key={item.code}\n                    style={{\n                      backgroundColor:\n                        highlightedIndex === index\n                          ? 'rgb(232, 232, 232)'\n                          : 'white',\n                      fontWeight:\n                        selectedItem \u0026\u0026 selectedItem === item\n                          ? 'bold'\n                          : 'normal'\n                    }}\n                  \u003e\n                    {item}\n                  \u003c/div\u003e\n                ))}\n              \u003c/div\u003e\n            )}\n          \u003c/div\u003e\n        )}\n      \u003c/Suggestion\u003e\n    );\n  }\n}\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n## Examples\n\n* [with simple basic data](https://github.com/ChoTotOSS/search-suggestion/tree/master/examples/withBasic)\n* [with simple list object data](https://github.com/ChoTotOSS/search-suggestion/tree/master/examples/withStaticData)\n* [with redux](https://github.com/ChoTotOSS/search-suggestion/tree/master/examples/withRedux)\n* [with redux \u0026 debounce component](https://github.com/ChoTotOSS/search-suggestion/tree/master/examples/withDebounceInput)\n\n## Props\n\n### items\n\n\u003e `Array` | default is an empty array\n\nUse as a datasource to render list result.\n\n### getDisplayName\n\n\u003e `function(item: any)` =\u003e return a text\n\nUse to display text content of selected item.\n\n### onSelectedItem\n\n\u003e `function(item: any)`\n\nUse to set new selected item value and extend the actions based on that selected\nitem.\n\n## Child callback functions\n\n### getInputProps\n\n\u003e `function({})`\n\nReturns the props you should apply to the `input` element that you render.\n\n### getListItemProps\n\n\u003e `function({})`\n\nReturns the props you should apply to the list item element that you render.\n\n### getItemProps\n\n\u003e `function({})`\n\nReturns the props you should apply to any menu item elements you render.\n\n## Actions\n\n### clearInputValue\n\n\u003e `function()`\n\nClear current value in `input` element\n\n## States\n\n### inputValue\n\n\u003e `string`\n\nThe current value of `input` element\n\n### highlightedIndex\n\n\u003e `int`\n\nThe current index of highlighted item\n\n### items\n\n\u003e `array`\n\nThe current data of menu\n\n### isOpen\n\n\u003e `boolean`\n\nThe menu open state\n\n### selectedItem\n\nThe value of selected item\n\n## Showcase\n\nWebsites built with Search Suggestion component\n\n### [Chợ tốt](https://www.chotot.com/toan-quoc/mua-ban)\n\n![suggestion](https://user-images.githubusercontent.com/6290720/32546438-b18b9ba4-c4b1-11e7-99d4-e2a7e39191ce.gif)\n\n### [Chợ tốt nhà](https://nha.chotot.com/toan-quoc/du-an-rg0-cg10000)\n\n![new_property_suggestion](https://user-images.githubusercontent.com/6290720/32546472-d117d3d4-c4b1-11e7-9d10-145a0595463e.gif)\n\n## Alternatives\n\nIf you don’t agree with the choices made in this project, you might want to\nexplore alternatives with different tradeoffs. Some of the more popular and\nactively maintained ones are:\n\n* [react-select](https://github.com/JedWatson/react-select)\n* [react-autocomplete](https://github.com/reactjs/react-autocomplete)\n* [downshift](https://github.com/paypal/downshift/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchototoss%2Fsearch-suggestion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchototoss%2Fsearch-suggestion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchototoss%2Fsearch-suggestion/lists"}