{"id":16492928,"url":"https://github.com/blairg/react-autocomplete-string-demo","last_synced_at":"2026-06-05T22:31:48.207Z","repository":{"id":42423230,"uuid":"62177654","full_name":"blairg/react-autocomplete-string-demo","owner":"blairg","description":"Demo site for react-autocomplete-string","archived":false,"fork":false,"pushed_at":"2016-08-07T00:01:39.000Z","size":4140,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-11T20:43:58.261Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://139.59.167.176/","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/blairg.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":"2016-06-28T22:12:32.000Z","updated_at":"2016-07-28T22:56:11.000Z","dependencies_parsed_at":"2022-09-24T03:50:56.870Z","dependency_job_id":null,"html_url":"https://github.com/blairg/react-autocomplete-string-demo","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/blairg%2Freact-autocomplete-string-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blairg%2Freact-autocomplete-string-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blairg%2Freact-autocomplete-string-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blairg%2Freact-autocomplete-string-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blairg","download_url":"https://codeload.github.com/blairg/react-autocomplete-string-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241329382,"owners_count":19944983,"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":[],"created_at":"2024-10-11T14:07:48.254Z","updated_at":"2026-06-05T22:31:48.177Z","avatar_url":"https://github.com/blairg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Autocomplete String\n\n[Source Code - Github](https://github.com/blairg/react-autocomplete-string)\n\n[Demo Site](http://139.59.167.176/)\n\nThe current build has been tested with Node.js 5.7.0.\n\n\u003e This project template is an autocomplete component for React.\n\n### Directory Layout\n\n```\n.\n├── /assets/                    # The source code of the application\n│   ├── /css/                   # Transpilied SASS files.\n│   ├── /images/                # Images used by the demo site.\n│   ├── /js/                    # Javascript files which are the autocomplete component.\n│   ├── /scss/                  # SASS files which need transpiling to CSS.\n├── /build/                     # The folder for compiled output\n├── /node_modules/              # 3rd-party libraries and utilities\n│── index.html                  # Page to demo the autocomplete component\n└── package.json                # The list of 3rd party libraries and utilities\n```\n\n### Getting Started\n\nJust [clone](https://github.com/blairg/react-autocomplete-string.git) or [fork](https://github.com/blairg/react-autocomplete-string/fork) the repo and start hacking:\n\n```shell\n$ git clone -o upstream https://github.com/blairg/react-autocomplete-string.git MyApp\n$ cd MyApp\n$ npm install gulp -g                          # Install Gulp task runner globally\n$ npm install bower -gnpm                      # Install Bower globally\n$ npm install babel-preset-es2015              # Install babel ES6 transpiler golbally.\n$ npm install                                  # Install Node.js components listed in ./package.json\n```\n\n### How to Build\n\n```shell\n$ gulp build\n```\n\n### How to Run\n\n```shell\n$ gulp\n```\n\nThis will start a lightweight development server with LiveReload and\nsynchronized browsing across multiple devices and browsers.\n\n### How to Update\n\nYou can always fetch and merge the recent changes from this repo back into\nyour own project:\n\n```shell\n$ git checkout master\n$ git fetch upstream\n$ git merge upstream/master\n$ npm install\n```\n\n### How to Test\n\nRun unit tests powered by [Jest](https://facebook.github.io/jest/) with the following\n[npm](https://www.npmjs.org/doc/misc/npm-scripts.html) command:\n\n```shell\n$ npm test\n```\n\n### How to use the autocomplete component\n\nThe component accepts the following parameters: -\n* numresults - The number of results you want the autocomplete search to return.\n* casesensitive - True for case senstive when searching the values object or false for case insensitive.\n* values - An array of string elements.\n* search - An enum for the type of search being either 'startswith' (The beginning of the string) or 'anywhere' (Anywhere within the string).\n* minimumkeystrokes - The number (Integer) of key strokes before the results are rendered.\n* placeholder - Placeholder text for the search box.\n\nA typical usage of the component is found below. The example below assumes an element such as a div with the id of 'react-autocomplete'.\n\n```js\n\"use strict\"\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport AutoComplete from './react-autocomplete-string.jsx';\n\nconst values = [\"Aberdeen\", \"Almondbury\", \"Bath\", \"Bradford\", \"Basingstoke\", \"Huddersfield\",\n                \"Halifax\", \"Hull\", \"Honley\", \"Harrogate\", \"Hadfield\", \"Holmfirth\", \"London\",\n                \"Leeds\", \"Manchester\", \"Nottingham\", \"Plymouth\", \"Wolverhampton\"];\n\nclass App extends React.Component {\n  render() {\n    return \u003cAutoComplete values={values} numresults={2} search={'anywhere'} casesensitive={false} minimumkeystrokes={2}\n                         placeholder={'search by town...'} /\u003e;\n  }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"react-autocomplete\"));\n```\n\n### How to Style The Component\n\nOverride the below styles. In a future release I will allow styles to be passed to the control.\n\n```css\n$searchTextPlaceholderColor: #303a28;\n$backgroundColor: #343434;\n\nbody{\n  background: $backgroundColor;\n}\n\n.reactLogo{\n  position: relative;\n  left: 40%;\n  top: 10px;\n}\n\n#autocompleteContainer{\n    width: 94%;\n    display: block;\n    margin-left: 3%;\n    margin-right: 3%;\n    max-width: 100%;\n    margin-top: 5%;\n    text-align: center;\n\n    #resultsList{\n        position: relative;\n        background-color: #FFFFFF;\n        width: 80%;\n        left: 10%;\n        top: 0%;\n        margin-top: -1%;\n\n        li {\n          margin-left: -4%;\n          text-align: center;\n          list-style-type: none;\n\n          \u0026:hover{\n            background-color: #c4baba;\n          }\n\n          em{\n            font-style: normal;\n            font-weight: bold;\n          }\n\n          a{\n            text-decoration: none;\n            color: $backgroundColor;\n          }\n        }\n    }\n}\n\n.TextBox-input{\n  color: #9DDD66;\n  background-color: #0E0F0D;\n  border-radius: 25px;\n  width: 80%;\n  height: 5%;\n  font-size: 30pt;\n  border: 2px solid $searchTextPlaceholderColor;\n  padding-left: 1%;\n  text-align: center;\n}\n\n::-webkit-input-placeholder { /* WebKit, Blink, Edge */\n    color:   $searchTextPlaceholderColor;\n}\n:-moz-placeholder { /* Mozilla Firefox 4 to 18 */\n   color:    $searchTextPlaceholderColor;\n   opacity:  1;\n}\n::-moz-placeholder { /* Mozilla Firefox 19+ */\n   color:    $searchTextPlaceholderColor;\n   opacity:  1;\n}\n:-ms-input-placeholder { /* Internet Explorer 10-11 */\n   color:    $searchTextPlaceholderColor;\n}\n:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */\n  color:     $searchTextPlaceholderColor;\n}\n```\n\n### Future development\n\nThere is a public Trello board which I will be tracking new features and bugs for the component. Currently it's only me on the project, but if anyone else comes board, then I add others to the board and the Github project.\n\n[Trello Board](https://trello.com/b/S6afejn6)\n\n### Learn More\n\n * [Getting Started with React.js](http://facebook.github.io/react/)\n * [React.js Wiki on GitHub](https://github.com/facebook/react/wiki)\n * [React.js Questions on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)\n * [React.js Discussion Board](https://groups.google.com/forum/#!forum/reactjs)\n * [Jest - Painless Unit Testing](http://facebook.github.io/jest/)\n * [The Future of React](https://github.com/reactjs/react-future)\n\n### Support\n\nHave feedback, feature request or need help? Contact me on [email](mailto:blair.garrett1@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblairg%2Freact-autocomplete-string-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblairg%2Freact-autocomplete-string-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblairg%2Freact-autocomplete-string-demo/lists"}