JavaScript 30 Day -- 05 快速匹配

来源：互联网发布：黄药师就爱宅知乎编辑：程序博客网时间：2024/05/16 07:13

实现效果：

在输入框中输入一个词，迅速匹配，展示含有这个词的诗句，诗句的来源 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);

阅读全文

0 0