JavaScript 30 Day -- 05 快速匹配

實現效果：

在輸入框中輸入一個詞，迅速匹配，展示含有這個詞的詩句，詩句的來源 json 數據是加載頁面時從網絡中異步獲得。

關鍵點：

Promise
    fetch() //異步請求
    then()
    json()
Array
    filter() //過濾器
    map()
    push() //添加
    join()
    Spread syntax 擴展語句
RegExp
    match() //檢索
    replace() //替換
監聽
    addEventListener()

html

  <form class="search-form">
    <input type="text" class="search" placeholder="City or State">
    <ul class="suggestions">
      <li>Filter for a city</li>
      <li>or a state</li>
    </ul>
  </form>

JavaScript

const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
const gushi = 'https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json';
var arr = [];

fetch(gushi).then(function(pam){
  return pam.json()
}).then(function(pam2){
  // console.log(pam2);
  return Array.prototype.push.apply(arr,pam2);
  // arr.push(...pam2);
});

function findGushi(pam1,arr){
  return arr.filter(function(pam3){
    var regexp = new RegExp(pam1,'gi'); //正則表達式
    var author = pam3.detail_author.join('');
    return pam3.title.match(regexp) ||pam3.detail_text.match(regexp)||author.match(regexp);
  })
}

function showGushi(){
  // console.log(this.value);
  var showG = findGushi(this.value,arr);
  var regexp = new RegExp(this.value,'gi');
  console.log(showG);
  //failed -> this.value 爲空
  var html = showG.map(function(pam){
    console.log(this.value);
    var text = pam.detail_text.replace(regexp,`<span class="hl">${ this.value }</span>`);
    var title = pam.title.replace(regexp,`<span class="hl">${ this.value }</span>`);
    return `
      <li>
        <span class='poet'>${text}</span>
        <span class='title'>${ title } - ${ pam.detail_author[0] }</span>
      </li>
    `;
  }).join("");
  //succeed
  var html = showG.map(pam =>{
    var text = pam.detail_text.replace(regexp,`<span class="hl">${ this.value }</span>`);
    var title = pam.title.replace(regexp,`<span class="hl">${ this.value }</span>`);
     return `
      <li>
        <span class='poet'>${text}</span>
        <span class='title'>${ title } - ${ pam.detail_author[0] }</span>
      </li>
    `;
  }).join('');
  suggestions.innerHTML = html;
}

var search = document.querySelector('.search');
var suggestions = document.querySelector('.suggestions');

search.addEventListener('change',showGushi);
search.addEventListener('keyup',showGushi);