```

在输入框中输入一个词，迅速匹配，展示含有这个词的诗句，诗句的来源 json 数据是加载页面时从网络中异步获得。（原课程中选的内容是英文城市名，我将其换成了唐诗，地址可在我的页面中获取）

初始文档中提供了 HTML 和 CSS，我们需要补全 JS 代码。这个挑战是 Ajax 的预热练习，在异步方面用到了一些目前还未被完全支持的新特性，但很好用。

- `promise`

- `fetch()`

- `then()`

- `json()`

- Array

- `filter()`

- `push()`

- `join()`

- `RegExp`

- `match()`

- `replace()`

1. 声明一个空数组，用于存放解析 json 后的数据

2. 运用 `fetch()` 获取 json 文件

1. 获取 json 响应

2. 解析数据

3. 存入数组

3. 获取两个主要 HTML 元素（`<input>`，`<ul>`），给 `<input>` 添加事件监听（`change`, `keyup`）

4. 编写匹配输入的函数

1. 运用 `filter()` 过滤数组数据

2. 创建正则表达式，构造过滤条件

5. 编写展示匹配结果的函数

1. 获取匹配数据

2. 替换关键词放入高亮的标签

3. 构造 HTML 标签数据

4. 将匹配值的 HTML 标签放入 `<ul>` 中

Fetch API 这个新特性，是 XMLHttpRequest 获取资源新的替代方案，目前还是一个实验中的功能，截至到 2017.01.01 在 MDN 显示的支持情况是：Chrome 42.0、Firefox (Gecko) 39、Opera 29、Chrome for Android 42.0、Android Webview。如何使用可以看[这篇文章](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)。

Fetch API 提供一个全局的方法 `fetch()`，这个方法（至少）需要接受 `资源的路径` 作为参数，返回值是一个 Promise 对象。若请求成功，这个对象包含了 Request 对应的 Response，但这只是一个 HTTP 相应。

语法如下：

fetch(input, init).then(function(response) { ... });

在这个挑战的示例中，使用此方法的截图如下：


const endpoint = 'https://raw.githubusercontent.com/soyaine/FE-Practice/f438d3bdf099461f88322b1b1f20c9d58f66f1ec/TangPoetryCut.json';