React Autocomplete Input Component

``jsx
import { AutoComplete } from 'react-autocomplete-input-component';

list={[1, 'one', 2, 'two', 3, 'three']}
handleHighlight={(highlightedItem) => {
console.log(highlightedItem)
}}
onSelect={(selectedItem) => {
console.log(selectedItem)
}}
/>
`


Demo

Check out more examples

Install

$3

`bash
npm install --save react-autocomplete-input-component
`

Props

$3


- array of the values to be searched for a match to the user input
- getDisplayValue is needed if list array contains objects
- can be passed in as an empty array and can always be changed dynamically

$3

- only needed if list contains objects
- function used to filter out the property value to be displayed in the dropdown

`jsx
list={[
{ name: 'Tom', id: 3233 },
{ name: 'Tommy', id: 3445 },
{ name: 'Thomas', id: 3663 }
]}
getDisplayValue={(list) => {
return list.map((listItem) => listItem.name)
}}
/>
`

$3


- callback function invoked when the highlighted item changes
- its only argument is the highlighted item's value from the original list
- if the highlighted item is a property value from an object, the whole object is passed in

$3

- callback function invoked when an item is selected
- its only argument is the selected item's value from the original list
- if the selected item is a property value from an object, the whole object is passed in

$3

- callback function invoked in place of onSelect when there is no matching value for the text input
- the input value is its only Argument
- if it is not passed in, the onSelect function will run with the text input being its only argument

`jsx
import { AutoComplete } from 'react-autocomplete-input-component';

list={[1, 'one', 2, 'two', 3, 'three']}
onSelect={(selectedItem) => {
console.log(selectedItem)
}}
handleNewValue={(inputValue) => {
console.log(inputValue)
}}
/>
`

$3


- used if new values are not permitted
- callback function invoked if onSelect fires when there is no match for the input value and the handleNewValue function is not passed in
- the input value is its only argument

$3

- message displayed in the dropdown when there is no match for the current input value
- default - will show no message
- if a string is passed in - it will be the message shown

`jsx
onSelectError={() => window.alert("TRY AGAIN")}
noMatchMessage={"No matches found"}
/>
`

$3


- can be used to control the position of the dropdown
- true opens the dropdown and false closes the dropdown

$3

- callback function invoked whenever dropdown is opened or closed
- its only argument is the current position of the dropdown

`jsx
const [openDropDown, setOpenDropDown] = useState()

const toggleDropDown = () => {
setOpenDropDown(openDropDown ? false : true)
}

return(
<>

onDropDownChange={(isOpen) => setOpenDropDown(isOpen)}
open={openDropDown}
/>

)
`

$3

- false (default) the dropdown closes when mouse is clicked outside of the auto-complete wrapper div
- setting to true will disable the feature
- to ignore a specific element give the element a className of ignore

$3

- Sets HTMLInputElement properties with some exceptions
- autocomplete, onChange, onKeyDown, onFocus cannot be overridden

`jsx
inputProps={{
placeholder: "search...",
onMouseOver: () => setOpenDropDown(true)
}}
showAll={true}
highlightFirstItem={false}
/>
`


$3


- false (default) dropdown doesn't appear until input value matches an item's prefix
- true - If the input is focused and empty the dropdown displays all list items

$3

- true (default) - automatically highlights first item in dropdown
- false - highlight is hidden until arrow key is pressed or hover with mouse

$3

- can be used with controlSubmit to only fire onSelect or handleNewValue when passed in as true

$3

- when set to true, onSelect and handleNewValue will only fire when submit is passed in as true

`jsx
const [submit, setSubmit] = useState(false);

const toggleSubmit = (() => {
setSubmit(true)
})

return(
<>


SUBMIT
controlSubmit={true}
submit={submit}
onSelect={(selectedItem) => {
console.log(selectedItem)
setSubmit(false)
}}
/>

)
`

$3


- Style Object for the div wrapping the whole component
- CSS can also be used with the class name autocomplete-wrapper

$3

- Style Object for the input element
- CSS can also be used with the class name autocomplete-input

$3

- Style Object for the dropdown container div
- CSS can also be used with the class name dropdown-container

$3

- Style Object for each item div in the dropdown
- CSS can also be used with the class name dropdown-item

$3

- Style Object for the highlighted item
- CSS can also be used with the class name highlighted-item

`jsx
highlightedItemStyle={{
backgroundColor: "dodgerBlue"
}}
listItemStyle={{
cursor: "pointer",
padding: "5px"
}}
dropDownStyle={{
backgroundColor: "antiquewhite",
width: "215px"
}}
/>
``

Tests

Add to the tests: src/AutoComplete.test.js \
Run the tests: npm test

Available Scripts

In the project directory, you can run:

$3

Runs the app in the development mode.\
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

$3

Launches the test runner in the interactive watch mode.