Framework7新版學習筆記之 自動補全輸入框(AutoComplete)
阿新 • • 發佈:2018-02-23
學習筆記 function i++ 效果 可選值 type ray text work
一:自動補全輸入框
我們可以定義一種具有自動補全功能的輸入框,預先設定一些可選值作為自動補全內容。當用戶輸入可選值的部分內容時,就會在下面自動列出匹配的選項,點擊即可自動填充對應的選項。
二:定義自動補全輸入框
<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)