react-core-ts

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 react-core-ts

import { AutoComplete } from 'react-core-ts';

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

You can also use the ExpandableAutoComplete component, which will allow you to show all selected items and have the option to inline search.

import { ExpandableAutoComplete } from 'react-core-ts';

function ExampleExpandableComponent() {
  return (
    <ExpandableAutoComplete
      label="Search"
      onChange={handleChange}
      getData={fetchSuggestions}
      placeholder="Type to search..."
      type="auto_suggestion"
      selectedItems={selectedItems}
      async={true}
      isMultiple={true}
      expandable={true}
    />
  );
}

You can also use the AutoCompleteWithSelectedList component, which will allow you to show all selected items at the bottom part of the suggection box. Also enabled these features along with this component, selected items count, clear all and expand more and tab menu features

import { AutoCompleteWithSelectedList } from 'react-core-ts';

function ExampleSelectedListComponent() {
  return (
    <AutoCompleteWithSelectedList
      label="Search"
      onChange={handleChange}
      getData={fetchSuggestions}
      placeholder="Type to search..."
      type="auto_suggestion"
      selectedItems={selectedItems}
      async={true}
      isMultiple={true}
      countOnly={true}
    />
  );
}

function ExampleSelectedListWithTabComponent() {
  return (
    <AutoCompleteWithSelectedList
      label="Search"
      onChange={handleChange}
      getData={fetchSuggestions}
      placeholder="Type to search..."
      type="auto_suggestion"
      selectedItems={selectedItems}
      async={true}
      isMultiple={true}
      countOnly={true}
      typeOnlyFetch={true}
      tab={tabMenu}
    />
  );
}

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.
• notDataMessage (string): Custom No Results Found message.
• shortCode (string): Custom Show code at the right area of the dropdown items.

Additional props for the ExpandableAutoComplete component:

• expandable (boolean): If true, enable the expandable feature.
• textCount (number): Selected chip item text count; the default value will be 10. If the text count is higher than this, it will show ... prefix.
• itemCount (number): Selected items count; the default value will be 1. If more than this count is selected, then will show a + count more button with tooltip.
• initialDataMessage (string): Custom intial empty message Type to search.

Additional props for the AutoCompleteWithSelectedList component:

• countOnly (boolean): If true, only shows selected items count.
• typeOnlyFetch (boolean): If true, suggections only list when user types on the search box. This works only if async: true.
• tab (Array): Local data source for tabs, format should be {id: nummber | string, label: string }
• clearTabSwitch (boolean): If true, clear all search results, selected items and search key when tab is switching.
• selectedRowLimit (number): Rows count for Selected items; the default value will be 2. If more than this count is selected, then will show the scroll bar.
• topMargin (number): Can adjust the dropdown top margin manually.
• currentTab (number): Current active tab index
• seselectedLabel (string): Able to change the "Item selected" label
• viewMode (boolean): If true, only shows selected items preview.

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!