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.

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

• 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

Support

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