AutoComplete Component

This is an example of an autocomplete component built in React, equipped with essential core functionalities:

• Dynamic Suggestions : As users type, the component dynamically suggests possible matches from a predefined list.
• Keyboard Navigation : Users can navigate through suggestions using the arrow keys and select items with the Enter key.
• Highlighted Text : The component highlights the matching text in the suggestions.
• Debounced Input : The component debounces the input to prevent unnecessary API calls.
• Customization : The appearance and behavior of the suggestions can be easily customized through props.

Table of Contents

1. Installation
2. Usage

Installation

(back to top)

1. Clone the repository

git clone 

2. Install dependencies

yarn install

3. Start the development server

yarn run dev

Usage

Here is an example of how to use the AutoComplete component:

<AutoComplete<Employee>
    dataSource={employees}
    displayExpr='fullName'
    placeholder='Search employees by name...'
    onSelect={(employee) => console.log(employee)}
    label='Employee Name'
    keyExpr='id'
    clearButton
/>

• datasource: Array of objects to search from
  
• displayExpr: The property of the object to display in the suggestions
  
• placeholder: Placeholder text for the input
  
• onSelect: Callback function to handle the selection of an item
  
• label: Label for the input
  
• keyExpr: The property of the object to use as a key
  
• clearButton: Boolean to show a clear button in the input
  

(back to top)