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.

$3

![](https://raw.githubusercontent.com/bilal114/react-autocomplete-select/master/screen-capture-_6_.gif)

$3

> 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


      Autocomplete Demo

     
                
          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) => 
search
 }
          // must pass the {...props} to the input field
          // and don't style any jsx element with style={{}} way, instead
          // assign className to any of the JSX element , 
          // because some of the stylings 
          // does not get overridden like background color of input 
          // is not overridden by using
          //  style={{}} props or importing your style.css file and better
          // you can use it by giving className='exampleClass' 
          // then style them in "globalStyle" 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;
            }
         "
        />

}
}

`$3`

| Property Name | Default | Description | Type| Short Example | | ------ | ------ | ------ | ------ | ------ | | onSelect : Optional | N/A | this method is called, when user selects the option from the dropdown | function| { // do whatever you want to do } | |onChange : Optional | N/A | called whenever input value changes | Array | { // do whatever you want to do }| |itemsData : Required | [] | data from which we will make search when user will type something in the input field| Array || |axiosConfig : Optional | false | If you provide axiosConfig data then itemsData will be ignored| function:Object | ({ url: http://locahost/yourfile.php?query=${inputValue} // you can provide here any of axios config parameters }) }| |getItemValue : Required | N/A | getItemValue method returns the value that we will use to search and show in the dropdown options | function:Any |{ return item.name }}| |selectOnBlur : Optional | false | selectOnBlur decides whether to select the active option or not when input is blured | boolean || |searchPattern : Optional | containsString | searchPattern decides the method of search | string< startsWith, endsWith, containsString, containsLetter> || |placeholder : Optional | Search | placeholder for input field | string || |inputRef : Optional | N/A | this property value should be of React.createRef() type and will be passed to input field as a ref prop so you can handle any js stuff like focus or get or set input field value | Object || |optionsJSX : Optional | N/A | you can make the option customized as you want by writing any valid JSX | function |value} />| |inputJSX : Optional | (props)=> | you can make the input field fully customized as you want by writing any valid JSX, but try styling it by giving it className and then style it in globalStyle props | function |} />| |maxOptionsLimit : Optional | 10 | if we got thousands of records in our response or we have passed it in itemsData prop then we could limitize the data to be shown up to an extent e.g 10 | number || |searchEnabled : Optional | false | enable search on axios responded data | boolean || |defaultInputValue : Optional | N/A | this default value shows up in the input field on page load and on input field blur | string | |

`$3`

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

`$3`


you client side Autocomplete code goes here

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);

$3

##### 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

react-autocomplete-select

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]

$3

![](https://raw.githubusercontent.com/bilal114/react-autocomplete-select/master/screen-capture-_6_.gif)

$3

> 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


      Autocomplete Demo

     
                
          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) => 
search
 }
          // must pass the {...props} to the input field
          // and don't style any jsx element with style={{}} way, instead
          // assign className to any of the JSX element , 
          // because some of the stylings 
          // does not get overridden like background color of input 
          // is not overridden by using
          //  style={{}} props or importing your style.css file and better
          // you can use it by giving className='exampleClass' 
          // then style them in "globalStyle" 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;
            }
         "
        />

}
}

`$3`

| 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___ {

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

`$3`


you client side Autocomplete code goes here

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: *");

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);

$3

##### In version 0.1.9
prop ref={} was replaced by inputRef

[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