react-autocomplete-search v1.0.2

React-autocomplete-search

A react based autocomplete module which allow you to append an search box with autocomplete feature in reactjs.

Install

npm react-autocomplete-search --save

Usage

var React = require('react');
var BS = require('react-bootstrap');
var SearchBar = require('react-autocomplete-search');
require('./autoComplete.css');

var Demo = React.createClass({
	getInitialState:function(){
		return{
			searchValue:'',
			input:''
		}
	},
	handleUserInput:function(value){
     this.setState({input:value});
   },
   handleSubmit:function(group){
     console.log("Submit Called");
   },
	render:function(){
	var styleBox = {
		width : "500px",
		margin:"0 auto"
	};
	var styleButton = {
		textAlign:"center"
	};
	var empty;
	var monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
 'July', 'August', 'September', 'October', 'November', 'December', ];
		return(
				<div style={styleBox}>

				 <SearchBar 
				 	onUserSubmit={this.handleSubmit} 
				 	onUserInput={this.handleUserInput} 
				 	filterText={this.state.input}
				 	placeholder="Search AutoComplete" 
				 	data={monthNames} />
				</div>
			);
	}
});

Functions

handleUserInput: This function will receive each value passed to the input.

handleSubmit: This will receive the text finally submitted by the user. Response call be used to be passed as argument to a post request or any function.

Input JSON

Input value is accepted in the format as mentioned below. var monthNames = 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ;

Custom css classes

.field for input text.
.search for search button

Version

1.0.2