Day6 Ajax Type Ahead

Demo

第六天的實作是練習Javascript非同步執行。

首先利用fetch物件建立接收資料的接口，fetch物件是類似於XMLHttpRequest，屬於Ajax的應用。

Ajax是指非同步的JavaScript與XML技術，其意義是當網頁與伺服器進行資料溝通時，畫面不必更新。

fetch的回應reponse是屬於promise，可使用then()來取得目標值。

fetch(endpoint)
  .then(blob => blob.json())
  .then(data => cities.push(...data));

而接收到資料格式如下。

[
    {
        city: "New York",
        growth_from_2000_to_2013: "4.8%",
        latitude: 40.7127837,
        longitude: -74.0059413,
        population: "8405837",
        rank: "1",
        state: "New York"
    },
    。
    。
    。
]

接下來利用正規表示式物件RegExp來尋找符合的字元與字串。

var re = /ab+c/;
var re = new RegExp("ab+c");
// 上列為正規表達式

const regex = new RegExp(word, 'gi');
// word是輸入值。
// g是全部檢查
// i是不分大小的檢查

接下來利用String.prototype.match(regexp)來取的符合的回傳值，本次練習是對資料中的city和state進行配對。

取得回傳值透過.map()將每一筆資料轉換成ul的子元素。

之後在input建立兩個change和keyup事件，change是指input元素的內容被改變時就觸發事件。keyup是指input元素當放開鍵盤就觸發事件。

過來是將篩選值特別標記出來，再取得經過正規表達式配對的資料之後，利用String.prototype.replace(regexp, value)來取代配對值，將配對值加入span，讓span加入Css的class。

const cityName = place.city.replace(regex, `<span class="h2">${value}</span>`)

就可以做到將配對值顯示出來。

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>

清單列表的Element

Javascript:

1. promise
   The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. [1]

2. fetch
   Fetch API 提供了一個介面去獲取資源 (包含跨網路的資源）。這似乎有點像我們所熟悉的 XMLHttpRequest ，但這個新的 API 提供了更強更彈性的特點。
   The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.

fetch(endpoint)
  .then(res =>{
    return res.json()
  })
  .then(data => console.log(data))

3. 正規表達式
   正規表達式是被用來匹配字串中字元組合的模式。在 JavaScript 中，正規表達式也是物件，這些模式在 RegExp 的 exec 和 test 方法中，以及 String 的 match、replace、search、split 等方法中被運用。

4. String.prototype.replace()
   replace() 方法會傳回一個新字串，此新字串是透過將原字串與 pattern 比對，以 replacement 取代吻合處而生成。

5. String.prototype.match()
   match() 方法會傳回正規表達式配對的Array。

str.match(regexp);

6. Array.prototype.join()
   join() 方法將陣列中所有元件連接、合併成一個字串。

var a = ['Wind', 'Rain', 'Fire'];
a.join();    // 'Wind,Rain,Fire'
a.join('-'); // 'Wind-Rain-Fire'

Css:

1. :nth-child()
   :nth-child是指在全部元素中的順序位置，不會依照元素的種類而變化。
   The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

p:nth-child(2) {
    background: red;
}

2. :nth-of-type()
   :nth-child是指在全部元素中的符合元素種類的順序位置。
   The :nth-of-type() CSS pseudo-class matches one or more elements of a given type, based on their position among a group of siblings.

p:nth-of-type(4n) {
  color: lime;
}

3. :nth-last-child()
   :nth-last-child指在全部元素中最後的一個。
   The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

p:last-child {
  color: lime;
}

4. :nth-last-of-type()
   :nth-last-child指全部符合配對元素中的最後一個。
   The :nth-last-of-type() CSS pseudo-class matches one or more elements of a given type, based on their position among a group of siblings, counting from the end.

p:last-of-type {
  color: lime;
}

5. :first-child
   :nth-last-child指在全部元素中第一個。
   The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

p:first-child {
  color: lime;
}

6. :first-of-type
   :first-of-type指全部符合配對元素中的第一個。
   The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

p:first-of-type {
  color: red;
}

tags: promise, fetch, RegExp