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.

Source Code - Github

Demo Site

Circle CI Builds

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

> This project template is an autocomplete component for React.

$3

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

$3

Just clone or 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
`

$3

`shell
$ npm build
`

$3

Run unit tests powered by Jest with the following
npm command:

`shell
$ npm test
`

$3

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
`

$3

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 placeholder={'search by town...'} />;
}
}

ReactDOM.render(, document.getElementById("react-autocomplete"));
`

$3

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;
}
``

$3

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

$3

* Getting Started with React.js
* React.js Wiki on GitHub
* React.js Questions on StackOverflow
* React.js Discussion Board
* Jest - Painless Unit Testing
* The Future of React

$3

Have feedback, feature request or need help? Contact me on email