Autocomplete Field

'use client';
 
import * as React from 'react';
 
import { AutoCompleteField } from '@/components/ui/formfield/auto-complete-field';
 
export function AutocompleteFieldDemo() {
  return (
    <form className="flex flex-col gap-4 p-4">
      <AutoCompleteField<Fruit>
        name="fruit"
        label="Fruit"
        getData={getData}
        keyFieldName="id"
        labelFieldName="label"
        value=""
        onChange={() => {}}
      />
    </form>
  );
}
 
type Fruit = {
  id: number;
  label: string;
};
 
//
const list: Fruit[] = [
  {
    id: 1,
    label: 'Apple',
  },
  {
    id: 2,
    label: 'Banana',
  },
  {
    id: 3,
    label: 'Blueberry',
  },
  {
    id: 4,
    label: 'Grapes',
  },
  {
    id: 5,
    label: 'Mango',
  },
  {
    id: 6,
    label: 'Pineapple',
  },
];
 
// mock api response
function getData(seek: string, take: number, search?: string, sort?: string): Promise<Fruit[]> {
  const searchFields = search?.split('~');
  let searchValue = searchFields?.[2] || '';
  return new Promise((resolve, reject) => {
    resolve(list.filter((item) => item.label.indexOf(searchValue) !== -1));
  });
}

'use client';
 
import * as React from 'react';
 
import { AutoCompleteField } from '@/components/ui/formfield/auto-complete-field';
 
export function AutocompleteFieldDemo() {
  return (
    <form className="flex flex-col gap-4 p-4">
      <AutoCompleteField<Fruit>
        name="fruit"
        label="Fruit"
        getData={getData}
        keyFieldName="id"
        labelFieldName="label"
        value=""
        onChange={() => {}}
      />
    </form>
  );
}
 
type Fruit = {
  id: number;
  label: string;
};
 
//
const list: Fruit[] = [
  {
    id: 1,
    label: 'Apple',
  },
  {
    id: 2,
    label: 'Banana',
  },
  {
    id: 3,
    label: 'Blueberry',
  },
  {
    id: 4,
    label: 'Grapes',
  },
  {
    id: 5,
    label: 'Mango',
  },
  {
    id: 6,
    label: 'Pineapple',
  },
];
 
// mock api response
function getData(seek: string, take: number, search?: string, sort?: string): Promise<Fruit[]> {
  const searchFields = search?.split('~');
  let searchValue = searchFields?.[2] || '';
  return new Promise((resolve, reject) => {
    resolve(list.filter((item) => item.label.indexOf(searchValue) !== -1));
  });
}