[Day6] Ajax Type Ahead

[Day6] Ajax Type Ahead

输入框筛选器制作

需要用到的技巧与练习目标

1. fetch
2. 展开运算符Spread syntax (...)
3. match
4. 整规表达式 RegExp
5. replace()

制作步骤与流程

1. 运用fetch方法来获取资料
2. 用展开运算符的方式整理data
3. 运用filter比对出输入文字以及与数据相同的资料
   3-1. 运用整规表达式来获取输入的字串
   3-2. 用match的方式比对数据并且回传
4. 运用监听方式 change/keyup 执行筛选条件并且运用innerHTML放入
   4-1. 运用map方式 制作需要放上网页的html结构
   4-2. 运用replace来重新组合字串

fetch

fetch 为 ES6 的新语法，是搭配 Promise的方法来执行请求网站和请求後获取Response的处理方式。

GET
GET 是 fetch 预设的请求语法

fetch('抓取资讯的网址')
 .then(function(response) {
   return response.json();
 })
 .then(function(myJson) {
   console.log(myJson);
 });

fetch 接收一个url作为参数，并且用then接收，请求的相关讯息。.json为回传的资料以物件的方式并将资料传给第二个then，在console中印出来。

参考资料来源:
https://medium.com/enjoy-life-enjoy-coding/jacascript-fetch-%E8%AE%93-es6-%E6%93%81%E6%9C%89%E4%B8%80%E5%B0%8D%E7%BF%85%E8%86%80-%E5%9F%BA%E7%A4%8E%E6%95%99%E5%AD%B8-2f98efe55ba4
https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/RegExp

https://5xruby.tw/posts/15min-regular-expression
https://www.fooish.com/javascript/string/replace.html