今天要介紹一個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查詢(當然後端要對應配合)。