今天要介紹一個autocomplete的library - Awesomplete，這是由一款功能強大但檔案小又容易使用使用的library，透過Awesomplete我們可以輕鬆地完成autocomplete功能，讓user在輸入文字時自動給予提示。
開始使用Awesomplete
首先載入相關的js/css，如果清單內容固定的話，只需要加入awesomplete這個class及在data-list這個attribute中加入預設的清單即可，甚至一行額外的JavaScript都不必寫，例如以下程式碼：
<input type="text" id="programming-language" placeholder="請輸入你最喜歡的程式語言" class="awesomplete" data-list="JavaScript, HTML, CSS, C#, JAVA, PHP, Ruby, Python">
如果覺得在data-list中加入一堆字串很麻煩，也可以建立一組<datalist>，然後再textbox的data-list中設定這個<datalist>的id即可
<input type="text" id="programming-language2" placeholder="請輸入你最喜歡的程式語言" class="awesomplete" data-list="#languages-list" />
<datalist id="languages-list">
<option>JavaScript</option>
<option>HTML</option>
<option>CSS</option>
<option>C#</option>
<option>Java</option>
<option>PHP</option>
<option>Ruby</option>
<option>Python</option>
</datalist>
當然，要彈性一點用JavaScript也是可以的
HTML:
<input id="programming-language3" />
JavaScript:
new Awesomplete(document.getElementById('programming-language3'), {
list: ['JavaScript', 'HTML', 'CSS', 'C#', 'Java', 'PHP', 'Ruby', 'Python']
});
也很簡單吧！
搭配ajax查詢
Awesomplete還有許多設定方式可以使用，可以自行上官方文件去查詢，但官方文件對於使用ajax查詢並沒有說明得非常清楚，因此以下簡單介紹一下使用ajax查詢該怎麼做。
事實上是，Awesomplete並沒有直接對應於ajax查詢的參數，這算是Awesomplete的缺點，不過我們可以透過監聽textbox的keyup事件，然後進行ajax查詢，再把原來的清單替換掉；利用這種方式來完成搭配ajax的autocomplete查詢，以下我們搭配國家名單的API-REST Countries作為範例：
首先HTML的部分很簡單：
<input type="text" id="countries" placeholder="請輸入國家名稱(英文)" />
JavaScript的部分稍微複雜一些
var demo4 = new Awesomplete(document.getElementById('countries'));
$('#countries').on('keyup', function() {
$.ajax({
url: 'https://restcountries.eu/rest/v1/name/' + this.value,
type: 'GET',
dataType: 'json'
})
.done(function(data) {
var list = [];
$.each(data, function(key, value) {
list.push(value.name);
});
demo4.list = list;
});
});
程式碼DEMO: https://jsfiddle.net/wellwind/tg65v396/
類似資源
- typeahead.js：由Twitter開發的autocomplete library，雖然沒有像Awesomplete可以連JavaScript都不用寫，但使用上也很容易，且直接支援ajax查詢(當然後端要對應配合)。