Auto Complete React component
npm install react-autocomplete-select[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
React Autocomplete for input field, all styles are fully customizable.
In which you could modify or customize the options JSX or add any kind of input field's JSX and any of the css to any element according to your need.

> npm install --save react-autocomplete-select
>
---
and after installation , Import this package where you want to use the calendar...
> import Autocomplete from "react-autocomplete-select";
#### Use it in this way...
``javascript
import React, {Component} from 'react';
import Autocomplete from 'react-autocomplete-select'
class Example extends Component {
inputRef = React.createRef();
state = {
changedValue : ''
}
componentDidMount(){
this.inputRef.current.focus();
}
componentDidUpdate(){
// get input field value
// console.log(this.inputRef.current.value);
}
render() {
return
inputRef={this.inputRef} // being passed as input field's ref prop
// so you can handle it on your own
// if you want to add animation or any other js stuff to it
defaultInputValue = {'any string your choice'}
searchPattern={'containsString'} // possible values are
// ['containsString','containsLetter','startsWith','endsWith']
selectOnBlur = {false} // whether active dropdown option should
// select or not when input field is blured
placeholder = "Type to Search" // input field's placeholder
maxOptionsLimit = {10} // max options to show in dropdown
searchEnabled = {true} /** if axiosConfig prop is passed
//then itemsData prop is ignored.
// And shows the data as returned by the axios request
// and does not make the search on the response data of axios request.
// If you want to enable search on the axios response data
// then set searchEnabled = {true}
**/
getItemValue={(item)=>{ return item.country }} /** get the value from
// every element of array passed object
// e.g if data to make search on is this
// [{country: 'USA'},{country: 'UK'}]
// then you will set this prop just like this
// getItemValue={(item)=>{ return item.country }}
**/
optionsJSX = { (value)=>value} // custom option JSX ...
// you can enclose the passed value in any valid jsx tags...
onChange = {
changedValue=>{
this.setState({ changedValue: changedValue });
}} // called every time the input values get changes
onSelect = {
selectedValue => {
console.log(' so here comes
the selected vlaue ......',selectedValue)
}} // called when an option is selected
axiosConfig = {(inputFieldValue) => ({
url : 'http://local.cuddlynest.com/autocomplete.php?
query=${inputFieldValue}',
method : 'get' // default,
responseType : 'JSON' // enable this option otherwise will not
// work properly and response from the
// server should return the data
// in json format
}) } // you could pass any of the axios config ...
// check axios config docs on this url
// https://github.com/axios/axios#request-config
itemsData = {[
{
"country": "United State"
},
{
"country": "United Kingdom"
},
{
"country": "Canada"
},
{
"country": "Australia"
},
{
"country": "New Zealand"
}
]}
inputJSX = {(props) =>
globalStyle = "
.mainSearchInputContainer {
background: #FFFFFF;
border: 1px solid #DCDADC;
box-sizing: border-box;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 2px;
height:45px;
}
.material-icons {
position: absolute;
left: 1.94%;
right: 86.94%;
top: 29.41%;
bottom: 26.47%;
vertical-align:middle;
}
.inputClass {
position: absolute;
left: 9.81%;
right: 70.97%;
top: 17.65%;
bottom: 17.65%;
font-family: Fira Sans;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 22px;
background: #FFFFFF;
outline : none;
width: 265px;
}
"
/>
`
| Property Name | Default | Description | Type| Short Example |
| ------ | ------ | ------ | ------ | ------ |
| onSelect : Optional | N/A | this method is called, when user selects the option from the dropdown | function|
|onChange : Optional | N/A | called whenever input value changes | Array |
|itemsData : Required | [] | data from which we will make search when user will type something in the input field| Array
| globalStyle : String (Optional)|
| ------ |
##### Default Value :
` css
* {
box-sizing: border-box;
}
body {
font: 16px Arial;
}
/the container must be positioned relative:/
.autocomplete {
position: relative;
display: inline-block;
width:300px;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
/Dropdown options container css/
.___optionsDiv___ {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/position the autocomplete items to be the same width as the container:/
top: 100%;
left: 0;
right: 0;
}
/Dropdown options each div css/
.___optionsDiv___ div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
/Dropdown options each div on hover css/
.___optionsDiv___ div:hover {
background-color: #e9e9e9;
}
/when navigating through the items using the arrow keys:/
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
`
##### Description
you could modify or override any of the above default provided css....
javascript
import React, {Component} from 'react';import Autocomplete from 'react-autocomplete-select'
class Example extends Component {
render() {
return getItemValue={item =>item.country}
itemsData = {[]}
axiosConfig = (inputValue) =>({
url: 'http://localhost/autocomplete.php?query='+inputValue,
method : 'get',
responseType : 'JSON' // necessary to parse the response...
// and you could pass any of the axios config parameters here...
})
/>
}
}
`
$3
here you need to generate a PHP file if you are using php otherwise use other file
like Asp or nodeJs file accordingly...> and put your file on the specified path and make request to search data according to request.
$3
`php
header("Access-Control-Allow-Origin: *");
$data = ["Afghanistan","Albania","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
if(isset($_REQUEST['query']) )
{
$searchQuery = strtolower($_REQUEST['query']);
$response = [];
foreach ($data as $key => $value) {
if(strpos(strtolower($value), $searchQuery)===false);
else
array_push($response, ['country' => $value]);
}
}
echo json_encode($response);
``##### In version 0.1.9
prop ref={} was replaced by inputRef
##### In version 0.1.10
A new prop was added
to show the default value if there is no value in the input field. it shows up
in the input field on page load and on input field blur
defaultInputValue = {'any default value'}
[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package
[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://github.com/bilal114/react-select-date-range-calendar