SlotUi autocomplete component details

<AutoComplete />

data/autocomplete.svelte

"The art of guessing what you're going to say before you say it."
E. Guessed, 1690

Component AutoComplete examples :

Using slots

component AutoComplete demo using slots

dataFieldName	string
searchField	string

code


<AutoComplete
  let:menuItemData
  class="marg-b"
  placeholder="Search in list"
  dataFieldName="name"
  {data}>
  <MenuItem>{menuItemData.name}</MenuItem>
</AutoComplete>

Using props

component AutoComplete demo using props

dataFieldName	string
searchField	string

code


<AutoComplete
  let:menuItemData
  {data}
  onPick={()=>{}}
  class="marg-b"
  placeholder="Search in list"
  style="width:200px"
  dataFieldName="name" />

Api preview :

__propDef: {
    props: {
        [x: string]: any;
        class?: string | undefined;
        element?: HTMLDivElement | null | undefined;
        data?: any;
        searchField?: string | undefined;
        dataFieldName?: string | string[] | undefined;
        mode?: "exact" | "partial" | undefined;
        filteredData?: any[] | undefined;
        selectedIndex?: number | undefined;
        onPick?: ((args: any) => void) | undefined;
    };
    events: {
        pick: CustomEvent<any>;
    } & {
        [evt: string]: CustomEvent<any>;
    };
    slots: {
        default: {
            menuItemData: any;
        };
        autoCompleteEmpty: {};
        autoCompleteNoResults: {};
    };
};

Link to api :

Api for component "AutoComplete"