<commit_before><!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Autocomplete component - UIkit documentation</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="../dist/js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
        <script src="../dist/js/addons/autocomplete.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">Get Started</a></li>
                    <li><a href="components.html">Components</a></li>
                    <li class="uk-active"><a href="addons.html">Add-ons</a></li>
                    <li><a href="customizer.html">Customizer</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>
                            <li class="uk-nav-header">Navigations</li>
                            <li><a href="addons_dotnav.html">Dotnav</a></li>
                            <li><a href="addons_slidenav.html">Slidenav</a></li>
                            <li class="uk-nav-header">Common</li>
                            <li><a href="addons_form-file.html">Form file</a></li>
                            <li><a href="addons_form-password.html">Form password</a></li>
                            <li><a href="addons_placeholder.html">Placeholder</a></li>
                            <li class="uk-nav-header">JavaScript</li>
                            <li class="uk-active"><a href="addons_autocomplete.html">Autocomplete</a></li>
                            <li><a href="addons_datepicker.html">Datepicker</a></li>
                            <li><a href="addons_markdownarea.html">Markdown area</a></li>
                            <li><a href="addons_notify.html">Notify</a></li>
                            <li><a href="addons_search.html">Search</a></li>
                            <li><a href="addons_sortable.html">Sortable</a></li>
                            <li><a href="addons_sticky.html">Sticky</a></li>
                            <li><a href="addons_timepicker.html">Timepicker</a></li>
                            <li><a href="addons_upload.html">Upload</a></li>
                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1 class="uk-article-title">Autocomplete</h1>

                            <p class="uk-article-lead"></p>

                            <p class="uk-article-lead">Create inputs that allow users to choose from a list of pre-generated values while typing.</p>

                            <h2>Usage</h2>

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

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'../src/tests/addons/_autocomplete.json'}">
                                <input type="text">
                            </div>

                            <p><span class="uk-badge">Note</span> Type in Hamburg, New York, Moscow or Amsterdam.</p>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'my-autocomplete.json'}"&gt;
    &lt;input type="text"&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2>Custom templates</h2>

                            <p>You can also create custom templates to display the results differently.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'../src/tests/addons/_autocomplete.json'}">
                                <input type="text">
                                <script type="text/autocomplete">
                                    <ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results">
                                        {{~items}}
                                        <li data-value="{{ $item.value }}">
                                            <a>
                                                {{ $item.title }}
                                                <div>{{{ $item.text }}}</div>
                                            </a>
                                        </li>
                                        {{/items}}
                                    </ul>
                                </script>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'my-autocomplete.json'}"&gt;
    &lt;input type="text"&gt;
    &lt;script type="text/autocomplete"&gt;
        &lt;ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results"&gt;
            {{~items}}
            &lt;li data-value="{{ $item.value }}"&gt;
                &lt;a&gt;
                    {{ $item.title }}
                    &lt;div&gt;{{{ $item.text }}}&lt;/div&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            {{/items}}
        &lt;/ul&gt;
    &lt;/script&gt;
&lt;/div&gt;</code></pre>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">
<commit_msg>docs updated<commit_after><!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Autocomplete component - UIkit documentation</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="../dist/js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
        <script src="../dist/js/addons/autocomplete.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">Get Started</a></li>
                    <li><a href="components.html">Components</a></li>
                    <li class="uk-active"><a href="addons.html">Add-ons</a></li>
                    <li><a href="customizer.html">Customizer</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>
                            <li class="uk-nav-header">Navigations</li>
                            <li><a href="addons_dotnav.html">Dotnav</a></li>
                            <li><a href="addons_slidenav.html">Slidenav</a></li>
                            <li class="uk-nav-header">Common</li>
                            <li><a href="addons_form-file.html">Form file</a></li>
                            <li><a href="addons_form-password.html">Form password</a></li>
                            <li><a href="addons_placeholder.html">Placeholder</a></li>
                            <li class="uk-nav-header">JavaScript</li>
                            <li class="uk-active"><a href="addons_autocomplete.html">Autocomplete</a></li>
                            <li><a href="addons_datepicker.html">Datepicker</a></li>
                            <li><a href="addons_markdownarea.html">Markdown area</a></li>
                            <li><a href="addons_notify.html">Notify</a></li>
                            <li><a href="addons_search.html">Search</a></li>
                            <li><a href="addons_sortable.html">Sortable</a></li>
                            <li><a href="addons_sticky.html">Sticky</a></li>
                            <li><a href="addons_timepicker.html">Timepicker</a></li>
                            <li><a href="addons_upload.html">Upload</a></li>
                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1 class="uk-article-title">Autocomplete</h1>

                            <p class="uk-article-lead"></p>

                            <p class="uk-article-lead">Create inputs that allow users to choose from a list of pre-generated values while typing.</p>

                            <h2>Usage</h2>

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

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'../src/tests/addons/_autocomplete.json'}">
                                <input type="text">
                            </div>

                            <p><span class="uk-badge">Note</span> Type in Hamburg, New York, Moscow or Amsterdam.</p>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'my-autocomplete.json'}"&gt;
    &lt;input type="text"&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2>Custom templates</h2>

                            <p>You can also create custom templates to display the results differently.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'../src/tests/addons/_autocomplete.json'}">
                                <input type="text">
                                <script type="text/autocomplete">
                                    <ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results">
                                        {{~items}}
                                        <li data-value="{{ $item.value }}">
                                            <a>
                                                {{ $item.title }}
                                                <div>{{{ $item.text }}}</div>
                                            </a>
                                        </li>
                                        {{/items}}
                                    </ul>
                                </script>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'my-autocomplete.json'}"&gt;
    &lt;input type="text"&gt;
    &lt;script type="text/autocomplete"&gt;
        &lt;ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results"&gt;
            {{~items}}
            &lt;li data-value="{{ $item.value }}"&gt;
                &lt;a&gt;
                    {{ $item.title }}
                    &lt;div&gt;{{{ $item.text }}}&lt;/div&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            {{/items}}
        &lt;/ul&gt;
    &lt;/script&gt;
&lt;/div&gt;</code></pre>

                            <h2>JavaScript options</h2>

                            <table class="uk-table uk-table-striped">
                                <thead>
                                    <tr>
                                        <th>Option</th>
                                        <th>Possible value</th>
                                        <th>Default</th>
                                        <th>Description</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><code>source</code></td>
                                        <td>url, array, callback function</td>
                                        <td>[]</td>
                                        <td>Data source</td>
                                    </tr>
                                    <tr>
                                        <td><code>minLength</code></td>
                                        <td>integer</td>
                                        <td>3</td>
                                        <td>Min. input length before autocomplete</td>
                                    </tr>
                                    <tr>
                                        <td><code>param</code></td>
                                        <td>string</td>
                                        <td>search</td>
                                        <td>Query name when sending ajax request</td>
                                    </tr>
                                    <tr>
                                        <td><code>delay</code></td>
                                        <td>integer</td>
                                        <td>300</td>
                                        <td>Delay time after typing stop</td>
                                    </tr>
                                </tbody>
                            </table>


                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

{'fraction_non_alphanumeric': 0.15431778031798815, 'fraction_numerical': 0.0036371194014340642, 'mean_word_length': 1.375, 'pattern_counts': {'":': 0, '<': 529, '<?xml version=': 0, '>': 529, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 60, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5423103', 'n_tokens_mistral': 5417, 'n_tokens_neox': 5093, 'n_words': 887}