# react-autocomplete-string

> React Autocomplete Component for String Arrays

Latest version **0.2.8** (published 2016-08-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-autocomplete-string
pnpm add react-autocomplete-string
yarn add react-autocomplete-string
bun add react-autocomplete-string
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.8 |
| Published | 2016-08-12 |
| First published | 2016-03-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Blair Garrett |
| Maintainers | blairgarrett |
| Keywords | react, autocomplete |

## Links

- npm: https://www.npmjs.com/package/react-autocomplete-string
- Repository: https://github.com/blairg/react-autocomplete-string
- Issues: https://github.com/blairg/react-autocomplete-string/issues
- npm.io page: https://npm.io/package/react-autocomplete-string

## Dependencies (3)

- [react-dom](https://npm.io/package/react-dom.md) ^15.1.0
- [react-tools](https://npm.io/package/react-tools.md) ^0.13.3
- [react-addons-test-utils](https://npm.io/package/react-addons-test-utils.md) ^15.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.8 (latest) — 2016-08-12
- 0.2.6 — 2016-07-12
- 0.2.4 — 2016-07-11
- 0.2.3 — 2016-07-11
- 0.2.2 — 2016-07-11
- 0.2.1 — 2016-07-11
- 0.2.0 — 2016-06-19
- 0.1.9 — 2016-06-18
- 0.1.8 — 2016-06-18
- 0.1.7 — 2016-06-18
- 0.1.6 — 2016-06-18
- 0.1.5 — 2016-06-18
- 0.1.4 — 2016-05-04
- 0.1.3 — 2016-05-03
- 0.1.2 — 2016-05-03
- … 11 more at https://npm.io/package/react-autocomplete-string/versions

## README

# React Autocomplete String

## DISCONTINUED - 12/08/2016
As of the above date I am no longer supporting this project. Any info, please get in touch [email](mailto:blair.garrett1@gmail.com).


[Source Code - Github](https://github.com/blairg/react-autocomplete-string)

[Demo Site](http://139.59.167.176/)

[Circle CI Builds](https://circleci.com/gh/blairg/react-autocomplete-string)

The current build has been tested with Node.js 5.7.0.

> This project template is an autocomplete component for React.

### Directory Layout

```
.
├── /source/                    # Contains 
└── package.json                # The list of 3rd party libraries and utilities
```

### Getting Started

Just [clone](https://github.com/blairg/react-autocomplete-string.git) or [fork](https://github.com/blairg/react-autocomplete-string/fork) the repo and start hacking:

```shell
$ git clone -o upstream https://github.com/blairg/react-autocomplete-string.git MyApp
$ cd MyApp
$ npm install gulp -g                          # Install Gulp task runner globally
$ npm install bower -gnpm                      # Install Bower globally
$ npm install jshint -g                        # Requires jshint to be installed globally.
$ npm install babel-preset-es2015              # Install babel ES6 transpiler golbally.
$ npm install                                  # Install Node.js components listed in ./package.json
```

### How to Build

```shell
$ npm build
```

### How to Test

Run unit tests powered by [Jest](https://facebook.github.io/jest/) with the following
[npm](https://www.npmjs.org/doc/misc/npm-scripts.html) command:

```shell
$ npm test
```

### How to Update

You can always fetch and merge the recent changes from this repo back into
your own project:

```shell
$ git checkout master
$ git fetch upstream
$ git merge upstream/master
$ npm install
```



### How to use the autocomplete component

The component accepts the following parameters: -
* numresults - The number of results you want the autocomplete search to return.
* casesensitive - True for case senstive when searching the values object or false for case insensitive.
* values - An array of string elements.
* search - An enum for the type of search being either 'startswith' (The beginning of the string) or 'anywhere' (Anywhere within the string).
* minimumkeystrokes - The number (Integer) of key strokes before the results are rendered.
* placeholder - Placeholder text for the search box.

A typical usage of the component is found below. The example below assumes an element such as a div with the id of 'react-autocomplete'.

```js
"use strict"

import React from 'react';
import ReactDOM from 'react-dom';
import AutoComplete from './react-autocomplete-string.jsx';

const values = ["Aberdeen", "Almondbury", "Bath", "Bradford", "Basingstoke", "Huddersfield",
                "Halifax", "Hull", "Honley", "Harrogate", "Hadfield", "Holmfirth", "London",
                "Leeds", "Manchester", "Nottingham", "Plymouth", "Wolverhampton"];

class App extends React.Component {
  render() {
    return <AutoComplete values={values} numresults={2} search={'anywhere'} casesensitive={false} minimumkeystrokes={2}
                         placeholder={'search by town...'} />;
  }
}

ReactDOM.render(<App />, document.getElementById("react-autocomplete"));
```

### How to Style The Component

Override the below styles. In a future release I will allow styles to be passed to the control.

```css
$searchTextPlaceholderColor: #303a28;
$backgroundColor: #343434;

body{
  background: $backgroundColor;
}

.reactLogo{
  position: relative;
  left: 40%;
  top: 10px;
}

#autocompleteContainer{
    width: 94%;
    display: block;
    margin-left: 3%;
    margin-right: 3%;
    max-width: 100%;
    margin-top: 5%;
    text-align: center;

    #resultsList{
        position: relative;
        background-color: #FFFFFF;
        width: 80%;
        left: 10%;
        top: 0%;
        margin-top: -1%;

        li {
          margin-left: -4%;
          text-align: center;
          list-style-type: none;

          &:hover{
            background-color: #c4baba;
          }

          em{
            font-style: normal;
            font-weight: bold;
          }

          a{
            text-decoration: none;
            color: $backgroundColor;
          }
        }
    }
}

.TextBox-input{
  color: #9DDD66;
  background-color: #0E0F0D;
  border-radius: 25px;
  width: 80%;
  height: 5%;
  font-size: 30pt;
  border: 2px solid $searchTextPlaceholderColor;
  padding-left: 1%;
  text-align: center;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:   $searchTextPlaceholderColor;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    $searchTextPlaceholderColor;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    $searchTextPlaceholderColor;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    $searchTextPlaceholderColor;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:     $searchTextPlaceholderColor;
}
```

### Future development

There 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.

[Trello Board](https://trello.com/b/S6afejn6)

### Learn More

 * [Getting Started with React.js](http://facebook.github.io/react/)
 * [React.js Wiki on GitHub](https://github.com/facebook/react/wiki)
 * [React.js Questions on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)
 * [React.js Discussion Board](https://groups.google.com/forum/#!forum/reactjs)
 * [Jest - Painless Unit Testing](http://facebook.github.io/jest/)
 * [The Future of React](https://github.com/reactjs/react-future)

### Support

Have feedback, feature request or need help? Contact me on [email](mailto:blair.garrett1@gmail.com)

---
_Source: https://npm.io/package/react-autocomplete-string · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._