useAutoComplete

import { useAutoComplete } from '@primereact/headless/autocomplete';

const autocomplete = useAutoComplete({ options: filteredItems, onComplete: search });
const { rootProps, inputProps, triggerProps, listProps, positionerProps, popupProps, arrowProps } = autocomplete;
 
<div {...rootProps}>
    <input {...inputProps} />
    <button {...triggerProps}></button>
    <div {...positionerProps}>
        <div {...popupProps}>
            <ul {...listProps}>...</ul>
        </div>
        <div {...arrowProps} />
    </div>
</div>;

const [filtered, setFiltered] = useState(items);
 
useAutoComplete({
    options: filtered,
    onComplete: ({ query }) => {
        setFiltered(items.filter((item) => item.toLowerCase().includes(query.toLowerCase())));
    }
});

useAutoComplete({
    options: results,
    delay: 300,
    onComplete: async ({ query }) => {
        const res = await fetch(`/api/search?q=${query}`);
        setResults(await res.json());
    }
});

const [selected, setSelected] = useState(null);
 
useAutoComplete({
    value: selected,
    onValueChange: ({ value }) => setSelected(value)
});

const [query, setQuery] = useState('');
 
useAutoComplete({
    inputValue: query,
    onInputValueChange: ({ query }) => setQuery(query)
});

useAutoComplete({
    options: cities,
    optionLabel: 'name',
    optionValue: 'code',
    optionDisabled: 'inactive'
});

[data-scope='autocomplete'][data-part='indicator'][data-open] {
    transform: rotate(180deg);
}
 
[data-scope='autocomplete'][data-part='popup'][data-open] {
    border: 1px solid var(--p-content-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}
 
[data-scope='listbox'][data-part='option'][data-focused] {
    background: var(--p-surface-100);
}