Iron Man Day 23 - Awesomplete

by Sheng Huang Huang

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.js"></script>
<h3>
Demo1
</h3>

<input type="text" id="programming-language" placeholder="請輸入你最喜歡的程式語言" class="awesomplete" data-list="JavaScript, HTML, CSS, C#, JAVA, PHP, Ruby, Python" />

<h3>
Demo2
</h3>

<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>

<h3>
Demo3
</h3>

<input type="text" id="programming-language3" placeholder="請輸入你最喜歡的程式語言" />

<h3>
Demo4
</h3>

<input type="text" id="countries" placeholder="請輸入國家名稱(英文)" />

JavaScript

new Awesomplete(document.getElementById('programming-language3'), {
	list: ['JavaScript', 'HTML', 'CSS', 'C#', 'Java', 'PHP', 'Ruby', 'Python']
});

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;
    });
});