# 自動完成/Autocomplete 創建允許在輸入時從預生成列表中進行選值的輸入框。 ## 用法 要使用這個組件，需要添加 `.uk-autocomplete` 類到一個包含 `input` 元素的 `&lt;div&gt;` 中。為了使自動完成輸入框所需要的JavaScript生效，你還需要添加 `data-uk-autocomplete` 屬性。添加 `{source:'PATH/TO/RESULTS'}` 到data屬性中，并設置需要用JSON進行格式化的自動完成列表的路徑 ([示例](../tests/components/_autocomplete.json))。 [下拉菜單](dropdown.html)會被注入需要顯示出來的自動完成建議。你甚至可以用鍵盤上的上下鍵來瀏覽下拉菜單。 注意 使用此組件需要額外添加 `autocomplete.css` 文件，在`css/components`文件夾中。此組件需要額外添加 `autocomplete.js` 文件，在`js/components`文件夾中。 ### Example  提示 嘗試輸入這些詞語： Hamburg, New York, Moscow or Amsterdam. ### Markup ``` <div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'my-autocomplete.json'}"> <input type="text"> </div> ``` * * * ## 自定義模板 你還可以通過創建自定義模板使結果以不同的形式顯示出來。 ### Example  ### Markup ``` <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"> {{~items}} <li data-value="{{ $item.value }}"> <a> {{ $item.title }} <div>{{{ $item.text }}}</div> </a> </li> {{/items}} </ul> </script> </div> ``` ## JavaScript 選項 | 選項 | 可用值 | 默認值 | 描述 | | --- | --- | --- | --- | | `source` | url, array, callback function | [] | 數據源 | | `minLength` | integer | 3 | 觸發自動完成的最小輸入長度 | | `param` | string | search | 發送ajax請求時的查詢名稱（Query name） | | `delay` | integer | 300 | 停止輸入后的延時 | | `flipDropdown` | boolean | false | 翻轉顯示結果的下拉菜單 | ### 手動初始化 ``` var autocomplete = UIkit.autocomplete(element, { /* options */ }); ``` ### 事件 | 名稱 | 參數 | 描述 | | --- | --- | --- | | `selectitem.uk.autocomplete` | event, data, acobject | 某個值被選擇時觸發 | | `show.uk.autocomplete` | event | 自動完成下拉菜單顯示時觸發 |