6、Fetch 结合 filter 实现快速匹配

最新推荐文章于 2021-07-24 16:44:29 发布

弱鸡如我

最新推荐文章于 2021-07-24 16:44:29 发布

阅读量211

点赞数

分类专栏：原生JavaScript练习

本文链接：https://blog.csdn.net/qq_37152533/article/details/108485064

版权

原生JavaScript练习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

涉及特性

Promise
- fetch()
- then()
- json()
Array
- filter()
- map()
- push()
- join()
- Spread syntax 扩展语句
RegExp
- match()
- replace()

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Type Ahead 👀</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <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>
  <script>
    const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
    var cities = [];
    fetch(endpoint).then(blob => blob.json()).then(data => {
      cities.push(...data);
    }).catch(err => conosle.error(err));

    var input = document.querySelector('.search');
    var suggestions = document.querySelector('.suggestions');
    input.addEventListener('change', showCitise);
    input.addEventListener('keyup', showCitise);

    function showCitise(envent) {
      let value = envent.target.value;
      let peck = cities.filter(city => city.city.match(value) || city.state.match(value));
      const items = peck.map(item => {
        const cityName = item.city.replace(value, `<span class="hl">${value}</span>`);
        const stateName = item.state.replace(value, `<span class="hl">${value}</span>`);
        return `
      <li>
        <span class="name">${cityName}, ${stateName}</span>
        <span class="population">${numberWithCommas(item.population)}</span>
      </li>
    `;
      }).join('');// join能够去除数组中的 ，
      suggestions.innerHTML = items;
    };

    function numberWithCommas(x) {// 这个正则很深奥呢
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      /*
      123456789 - 》123,456,789
      23456789 - 》23,456,789
      3456789 - 》3,456,789
      
      */ 
    }

  </script>
</body>

</html>

弱鸡如我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6、Fetch 结合 filter 实现快速匹配

涉及特性Promisefetch()then()json()Arrayfilter()map()push()join()Spread syntax 扩展语句RegExpmatch()replace()效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Type Ahead ????<
复制链接

扫一扫