Create inputs that allow users to choose from a list of pre-generated values while typing.


To apply this component, add the .uk-autocomplete class to a <div> element around an input element. To enable the necessary JavaScript for the autocomplete input, you also need to add the data-uk-autocomplete attribute. Add {source:'PATH/TO/RESULTS'} to the data attribute and set the path to your autocomplete list, which needs to be formatted in JSON (Example). A dropdown from the Dropdown component is injected to display autocomplete suggestions. You can even navigate through the dropdown with the up and down keys of your keyboard.


Note Type in Hamburg, New York, Moscow or Amsterdam.


<div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'my-autocomplete.json'}">
    <input type="text">

Custom templates

You can also create custom templates to display the results differently.



<div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'my-autocomplete.json'}">
    <input type="text">
    <script type="text/autocomplete">
        <ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results">
            <li data-value="{{ $item.value }}">
                    {{ $item.title }}
                    <div>{{{ $item.text }}}</div>

JavaScript options

Option Possible value Default Description
source url, array, callback function [] Data source
minLength integer 3 Min. input length before triggering autocomplete
param string search Query name when sending ajax request
delay integer 300 Delay time after stop typing
flipDropdown boolean false Flip result dropdown

Init element manually

var autocomplete = UIkit.autocomplete(element, { /* options */ });


Name Parameter Description event, data, acobject On item selected event On autocomplete dropdown show