CODEWITHSUNDEEP
javascriptautocompletesvelte
Furious Gamer
Furious Gamer

Reputation: 539

JS Autocompleter does not produce a dropdown for suggestions

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..." />

Upvotes: 0

Views: 26

Answers (1)

Furious Gamer
Furious Gamer

Reputation: 539

I figured it out. My Autocomplete component was used in a modal component, and apparently the dropdown suggestion list from Autocompleter is being appended to the end of the DOM, not below the input element. Since both the modal and the dropdown list use absolute positioning, the modal wins and comes out on top (overlaying the dropdown list). Therefore, I couldn't see it. The fix was to manually give the produced dropdown a higher z-index than the modal by overwriting a CSS class used by Autocompleter.

Upvotes: 0

Related Questions