I am using the autocompleter (https://www.npmjs.com/package/autocompleter?activeTab=readme) JS library for an autocomplete module, and I am wondering if I am doing something wrong (although it looks correct according to the example).
The problem is that the suggestions dropdown, as an autocomplete commonly provides, does not appear when entering text. I already confirmed that it triggers the passed search function and that the search does deliver results internally, in addition to the input element receiving an aria-expanded="true" update to the DOM properties. But nothing expands, and no errors are thrown. Also, the render function is being executed as console logs are produced from it. I'm using svelte, so here is the svelte component (Autocomplete.svelte):
<script lang="ts"> import { onMount } from "svelte"; import autocomplete, { type AutocompleteItem } from 'autocompleter'; export let placeholder = "Search..."; export let onSelect: (item: any) => void = () => {}; export let onSearch: (text: string, update: (items: any) => void) => void = () => {}; export let renderText: (item: any) => string = (item: any) => item.name; let input: HTMLInputElement; onMount(() => { autocomplete({ input: input, minLength: 1, debounceWaitMs: 200, emptyMsg: "No results found.", fetch: onSearch, onSelect: onSelect, render: function(item: AutocompleteItem, currentValue: string): HTMLDivElement | undefined { const itemElement: HTMLDivElement = document.createElement('div'); console.log("rendering", item, currentValue); itemElement.textContent = renderText(item); return itemElement; } }) })</script><input bind:this={input} class="input input-bordered w-full input-sm autocomplete" type="text" {placeholder} />And here is the code i am building the component with:
function updateCurrentComponent(component: Component): void { currentComponent = component; } function isComponentMatch(text: string, component: Component) { return component.name.toLowerCase().startsWith(text) || component.type.name.toLowerCase().startsWith(text); } function onAutocompleteSearch(text: string, update: (items: any) => void): void { text = text.toLowerCase(); console.log("Searching for", text, components); const filteredComponents = components.filter(component => isComponentMatch(text, component)).slice(0, 10); console.log("Filtered components", filteredComponents); update(filteredComponents); } function renderAutocompleteText(component: Component): string { return `${component.name} (${component.type.name})`; }...<Autocomplete onSelect={updateCurrentComponent} onSearch={onAutocompleteSearch} renderText={renderAutocompleteText} placeholder="Search for stuff..." />