Autocomplete


    import { Autocomplete } from 'ulule/owl-kit-components/dist/next.esm'


    import { Autocomplete } from 'ulule/owl-kit-components/dist/next.esm'

No result


    <Autocomplete
        fetch={query => {
            // fake query
            return new Promise((res) => {
                const results = [
                    { label:'foo', value:1 },
                    { label:'foobar', value:2 },
                    { label:'really long result that should overflow any reasonable autocomplete setup even given that in this case the autocomplete controls span over the whole screen, at least it is not a 8k tv (or is it ?) ', value:3 },
                    { label:'bar', value:4 },
                    { label:'baz', value:5 },
                ]
                const filtered = results.filter(result => result.label.startsWith(query)).map(result => ({ ... result}));
                setTimeout(() => res(filtered), 100*Math.random())
            })
        }}
        onResultSelect={console.log}
        renderNoResult={() => <strong>No result</strong>}
        renderResult={({ result }) => <span style={{ color:'red'}}>{result.label}</span>}
    />


    <Autocomplete
        fetch={query => {
            // fake query
            return new Promise((res) => {
                const results = [
                    { label:'foo', value:1 },
                    { label:'foobar', value:2 },
                    { label:'really long result that should overflow any reasonable autocomplete setup even given that in this case the autocomplete controls span over the whole screen, at least it is not a 8k tv (or is it ?) ', value:3 },
                    { label:'bar', value:4 },
                    { label:'baz', value:5 },
                ]
                const filtered = results.filter(result => result.label.startsWith(query)).map(result => ({ ... result}));
                setTimeout(() => res(filtered), 100*Math.random())
            })
        }}
        onResultSelect={console.log}
        renderNoResult={() => <strong>No result</strong>}
        renderResult={({ result }) => <span style={{ color:'red'}}>{result.label}</span>}
    />

Property	Description	Default value
className from AutocompleteProps	string \| undefined	-
fetch from AutocompleteProps	(query: string) => Promise<autocomplete.Result[]>	-
initialQuery from AutocompleteProps	string \| undefined the initial query. Makes the component uncontrolled (incompatible with `query`)	''
onQueryChange from AutocompleteProps	((query: string) => void) \| undefined handler called on each query change, with the new query	() => {}
onResultSelect from AutocompleteProps	((result: autocomplete.Result) => void) \| undefined handler called on each selection change, with the selected result	() => {}
query from AutocompleteProps	string \| undefined the current query. Makes the component controlled (incompatible with `initialQuery`)	''
renderResult from AutocompleteProps	React.ComponentClass<{ result: autocomplete.Result; }, any> \| React.FunctionComponent<{ result: autocomplete.Result; }> \| undefined Component to render results with. Won't be rendered if no results where fetched	({ result }) => <>{result.label}</>
renderResultExtra from AutocompleteProps	React.ComponentClass<{ close: () => void; }, any> \| React.FunctionComponent<{ close: () => void; }> \| undefined Extra component to display under results. Won't be rendered if no results where fetched	() => {}
renderNoResult from AutocompleteProps	React.ComponentClass<{ close: () => void; }, any> \| React.FunctionComponent<{ close: () => void; }> \| undefined Component to render if no results where fetched.	() => {}
height from AutocompleteProps	number \| undefined	-
value from SearchInputProps	string \| undefined Value of the search input	-
translations from SearchInputProps	{ clear: string; } \| undefined Translation object	-