一：自動補全輸入框

我們可以定義一種具有自動補全功能的輸入框，預先設定一些可選值作為自動補全內容。當用戶輸入可選值的部分內容時，就會在下面自動列出匹配的選項，點擊即可自動填充對應的選項。

二：定義自動補全輸入框

<div class="item-input-wrap">
      <input id="autocomplete-dropdown" type="text" placeholder="提示文本">
</div>

三：在js中創建候補選項，並且為輸入框創建自動補全控件

var array =[‘選項1‘,‘選項2‘,...] //
 
創建候補選項

//創建自動補全
var autocompleteDropdownSimple = app.autocomplete.create({
  inputEl: ‘#autocomplete-dropdown‘,//自動補全輸入框id
  openIn: ‘dropdown‘,
  source: function (query, render) {//query是輸入框接收到的檢索關鍵字，render是渲染器
    var results = [];//候補結果
    if (query.length === 0) {
      render(results);
      return;
    }
    
 
// 1:根據檢索關鍵字查找匹配的候補結果
    for (var i = 0; i < array.length; i++) {
      if (array[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
           results.push(array[i]);
    }
    // 2:把匹配結果渲染到輸入框下方供選擇
    render(results);
  }
});

四：各種自動補全輸入框效果案例

http://framework7.io/docs/autocomplete.html

Framework7新版學習筆記之 自動補全輸入框(AutoComplete)