JS 自动完成器不会生成建议下拉列表

Question

我正在使用自动完成器（https://www.npmjs.com/package/autocompleter?activeTab=readme）JS库作为自动完成模块，我想知道我是否做错了什么（尽管根据参见示例）。

问题在于，自动完成功能通常提供的建议下拉列表在输入文本时不会出现。我已经确认它会触发传递的搜索函数，并且除了输入元素接收 DOM 属性的

aria-expanded="true"

更新之外，搜索确实在内部传递结果。但没有任何扩展，也没有抛出任何错误。此外，当控制台日志生成时，

render

函数正在执行。我使用的是 svelte，所以这里是 svelte 组件（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} />

这是我构建组件的代码：

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

Answer 1

我想通了。我的自动完成组件用于模态组件，显然自动完成器的下拉建议列表被附加到 DOM 的末尾，而不是输入元素下方。由于模式和下拉列表都使用绝对定位，因此模式获胜并位于顶部（覆盖下拉列表）。因此，我看不到它。解决方法是通过覆盖自动完成器使用的 CSS 类，手动为生成的下拉菜单提供比模式更高的 z-index。