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.

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 or fork the repo and start hacking:

$ 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

$ npm build

How to Test

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

$ npm test

How to Update

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

$ 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'.

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

$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

Learn More

Support

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