{"id":28400309,"url":"https://github.com/sui-components/sui-autocompleted","last_synced_at":"2025-07-22T19:34:29.454Z","repository":{"id":37924528,"uuid":"39007987","full_name":"SUI-Components/sui-autocompleted","owner":"SUI-Components","description":"React Autocompleted","archived":false,"fork":false,"pushed_at":"2023-01-04T21:37:46.000Z","size":1508,"stargazers_count":6,"open_issues_count":11,"forks_count":4,"subscribers_count":47,"default_branch":"master","last_synced_at":"2025-06-28T09:38:32.355Z","etag":null,"topics":["site--es-platform","team--es-pt-web-platform","tier--2","vert--es-platform","vert--es-platforms"],"latest_commit_sha":null,"homepage":"http://sui-components.github.io/sui-autocompleted/","language":"JavaScript","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/SUI-Components.png","metadata":{"files":{"readme":"README.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":"2015-07-13T11:25:23.000Z","updated_at":"2025-02-09T09:26:03.000Z","dependencies_parsed_at":"2023-02-02T20:46:20.813Z","dependency_job_id":null,"html_url":"https://github.com/SUI-Components/sui-autocompleted","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/SUI-Components/sui-autocompleted","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SUI-Components%2Fsui-autocompleted","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SUI-Components%2Fsui-autocompleted/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SUI-Components%2Fsui-autocompleted/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SUI-Components%2Fsui-autocompleted/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SUI-Components","download_url":"https://codeload.github.com/SUI-Components/sui-autocompleted/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SUI-Components%2Fsui-autocompleted/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266561386,"owners_count":23948632,"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-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["site--es-platform","team--es-pt-web-platform","tier--2","vert--es-platform","vert--es-platforms"],"created_at":"2025-06-01T09:38:42.950Z","updated_at":"2025-07-22T19:34:29.428Z","avatar_url":"https://github.com/SUI-Components.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SUI-Autocompleted\n\nReact component that shows a list of suggestions under an input file when you start to write something.\nIt's based on the container component design ( [more info](https://medium.com/@learnreact/container-components-c0e67432e005) ).\n\n\n## Demo page\n\n- Checkout a Sui-Autocompleted component demo [here](http://sui-components.github.io/sui-autocompleted/).\n \u003cbr /\u003e or...\n- Clone the repo and open `index.html` file inside `docs` folder\n\n\n## Usage\n\n```\nimport 'babel/polyfill';\nimport React from 'react';\nimport ReactDom from 'react-dom';\nimport AutocompletedContainer from './autocompleted-container';\nimport AutocompletedGithubUserContainer from './autocompleted-githubUsers-container';\nimport AutocompletedComponentContainer from './autocompleted-component-container';\nimport './style.scss';\nimport '../src/index.scss';\n\nReactDom.render(\u003cAutocompletedContainer /\u003e, document.getElementById('languages'));\nReactDom.render(\u003cAutocompletedGithubUserContainer /\u003e, document.getElementById('github-users'));\nReactDom.render(\u003cAutocompletedComponentContainer /\u003e, document.getElementById('component-container'));\n```\n\n\n## Component Properties\n\nThe component exposes the following props:\n\n* placeholder (String): **Optional** Default text value for the input file when no key is pressed (placeholder value).\n* suggests (Array): **Required** Array of SuggestionObjects. Te array contains the suggestions to show. If you don't want to show anything you have to send an empty array.\n* handleChange (Function): **Required** This function is called everytime user change the input field value.\n\n\t```javascript\n\t\tconst handleChange = function( inputFileValue ){ ... }\n\t```\n* handleSelect (Function): **Required** This function is called when one suggestion is selected (via click or enter pressed).\n\n\t```javascript\n\t\tconst handleSelect = function( suggestionValue ){ ... }\n\t```\n\n* handleBlur (Function): This function is called everytime user exits the input.\n\n* handleFocus (Function): This function is called everytime user focus on the input.\n* selectFirstByDefault (Boolean): **Optional** It sets first position for the autocomplete default active option. Defaults to `true`.\n* focus (Boolean): **Optional** It trigger focus in the input. Defaults to `false`.\n\nand then you have to create containers which one setting that properties in the sui-autocompleted component. You can view an example of this kind of container in the [doc folder](https://github.com/scm-spain/sui-autocompleted/blob/master/docs/autocompleted-container.jsx).\n\n### SuggestObject\n\nAn SuggestObject is a plain JS Object with these specials keys:\n\n```javascript\n{\n    'id': [Unique id for the suggestion],\n    'value': [value to be passed to the handleSelect callback function]\n    'content': [React Component] or [Text to be show in the UI]\n    'literal': [String] This key is REQUIRED only if you are using a ReactJS Component like a content. It is used to decide which text has to be put in the input text when this suggestion is selected, in other case content will be used,\n}\n```\n\n### Theme\n\nThere are several classes in order to apply a theme to the component:\n\n* sui-autocompleted\n* sui-autocompleted-input\n* sui-autocompleted-clear\n* sui-autocompleted-results\n* sui-autocompleted-item\n* sui-autocompleted-item--active\n\nThe component exports a basic CSS that you can include from the package in the node_modules.\n\n\n## Installation\n\nTo run the component and play with the examples you have to:\n\n### Download files from GitHub repo.\n\n* `$ git clone https://github.com/scm-spain/sui-autocompleted`\n* `$ cd sui-autocompleted`\n\n### Install dependencies.\n\n* `$ npm install` // Install npm dependencies from package.json\n\n### Launch the development environment.\n\n* `$ npm run dev` // Run development environment\n*  Go to _localhost:8080_\n\n\n## Bundle\n\nIn order to generate the bundle including all React dependencies and the component logic we need to bundle a single JS file running the following command:\n```\n$ npm run build\n```\n\n\n## JS Testing\n\nExecute a complete test by running:\n\n```\nThere are two options for executing tests:\n\n* Single mode: `$ npm test`\n* Watch mode: `$ npm run test:watch`\n\n\n## Lint Testing\n\n```\nIn addition, you can run specific test for linting JS and SASS:\nSASS: (SASS linting rules specified in file `.scss-lint.yml`)\n\n```\n$ npm run lint:sass\n```\n\n\n## NPM\n\nThe SUI-Autocompleted component is available as a NPM package [here](https://www.npmjs.com/package/@schibstedspain/sui-autocompleted):\n\n```\nnpm install @schibstedspain/sui-autocompleted`\n```\n\n## Environment Dependencies\n\nTo run the lint tasks we have dependencies of:\n\n* [Ruby](https://www.ruby-lang.org/en/downloads/)\n* [scss-lint](https://github.com/brigade/scss-lint)\n\nIf that tools are not installed you cant commit. Because the lint pass never will be ok.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsui-components%2Fsui-autocompleted","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsui-components%2Fsui-autocompleted","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsui-components%2Fsui-autocompleted/lists"}