AutoComplete Component

The AutoComplete component offers a user-friendly input experience by presenting suggestions based on their input, allowing for efficient and interactive form filling. This component can work with both local and asynchronous data, and provides single and multi-select functionality.

Table of Contents

• AutoComplete Component
  • Table of Contents
  • Features
  • Installation
  • Props
  • Contribution

Features

• Single & Multi-select: Allows users to select a single or multiple suggestions.
• Asynchronous Data Support: Can fetch suggestions from an API or use local data.
• Pagination: Supports paginated data with a "Load More" feature.
• Customizable: Provides props for styling, placeholder text, and more.
• Error Handling: Displays validation errors.

Installation

Before you can use the AutoComplete component, ensure you've imported it properly.

npm install qbs-form-builder

import {AutoComplete} from 'qbs-form-builder';

function ExampleComponent() {
  return (
    <AutoComplete
      label="Search"
      onChange={handleChange}
      getData={fetchSuggestions}
      required={true}
      placeholder="Type to search..."
      type="auto_complete"
      async={true}
    />
  );
}

Props

You can pass the following props to the AutoComplete component:

• label (string): Label for the input field.
• onChange (function): Callback when the value changes.
• getData (function): Asynchronous function to retrieve suggestions. By default, it returns an empty array.
• data (Array): Local data source for suggestions.
• errors (object): Validation error messages.
• required (boolean): Indicates if the input is mandatory. Defaults to false.
• name (string): Name attribute for the input element.
• fullWidth (boolean): If true, the input will take the full width of its container. Defaults to false.
• placeholder (string): Placeholder text for the input.
• id (string): ID attribute for the input element.
• type (string): Determines the type of autocomplete (custom_select, auto_complete, or auto_suggestion). Defaults to custom_select.
• readOnly (boolean): Makes the input read-only if set to true. Defaults to false.
• disabled (boolean): Disables the input if set to true. Defaults to false.
• value (string): Value of the input.
• isMultiple (boolean): If true, allows for multiple selection. Defaults to false.
• desc (string): The key name for displaying suggestion items. Defaults to 'name'.
• descId (string): The key name for the unique ID of suggestion items. Defaults to 'id'.
• singleSelect (boolean): If set to true, adds checkbox functionality in single-select mode.
• className (string): CSS class for styling the input component.
• async (boolean): If true, indicates that the getData function is asynchronous.
• nextBlock (function or boolean): Function for pagination or boolean to determine if pagination is enabled.
• paginationEnabled (boolean): If true, pagination for suggestions is enabled.

Contribution

If you'd like to contribute to the improvement of the AutoComplete component, please follow the standard contribution guidelines for this project. Your feedback and contributions are valuable!