[javascript30]Ajax Type Ahead

javascript/javascript30

[javascript30]Ajax Type Ahead

소영 2021. 7. 15. 01:18

Ajax Type Ahead

인풋박스에 도시이름을 검색하면 아래 리스트에 검색관련 도시 이름이 나온다.

1. fetch().then 을 통해 api 호출하는 법 알기

2. blob.json 으로 데이터 다루기

3.RegExp() 정규식 생성자 만들어 문자열 확인하기

4..map()메서드를 이용하여 배열 묶기

코드

<!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';
const cities = [];
fetch(endpoint)
        .then(blob => blob.json())//.blob() :Response 가져와서 완료할 때까지 읽기,데이터를 다룰때 사용한다
        .then(data => cities.push(...data));//배열에 api를 넣고 this로 바인딩함 / ...이없으면 length가 1로 나옴

function findMatches(wordTomatch,cities){
  return cities.filter(place =>{
    //도시나 주가 검색한 것과 일치하는지 알아내야 합니다
    const regex = new RegExp(wordTomatch,'gi');//RegExp() 정규식 객체 'g'-문자열 전체 확인 'i'-문자열에서 대소문자 구분 x
    return place.city.match(regex) || place.state.match(regex);//.match() 문자열이 정규식과 매치되는 부분 검색
  });
}        
function numberWithCommas(x) {//숫자 3자리 단위마다 콤마 찍기
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
function displayMatches(){
  const matchArray = findMatches(this.value,cities);
  const html = matchArray.map(place=>{
    const regex = new RegExp(this.value,'gi');
    const cityName = place.city.replace(regex,`<span class="hl">${this.value}</span>`);//.replace 어떤 패턴 일치하는 부분에 새로운 문자열 반환
    const stateName = place.state.replace(regex,`<span class="hl">${this.value}</span>`);
    return `
    <li>
      <span class="name">${cityName},${stateName}</span>
      <span class="population">${numberWithCommas(place.population)}</span>
    </li>
    `
  }).join('');//배열을 반환한 것을 묶어줌
  suggestions.innerHTML = html;
}
const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');

searchInput.addEventListener('change',displayMatches);
searchInput.addEventListener('keyup',displayMatches);
</script>
</body>
</html>

알게 된 문법

fetch().then

Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 fetch() (en-US) 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.(MDN 참조)

->api를 호출하는 메서드

blob or blob()

음악,이미지 등의 여러 데이터를 다룰때 사용한다

(여기 코드에서 사용된 blob은 매개변수로서 사용된 것으로 현재 설명하는 것은 이코드와 관련은 없지만 비유적으로는 관련이 있으니 작성하겠다.)

ex.)블롭이 아닌 객체와 데이터에서 Blob을 생성하려면 Blob생성자를 만들어야한다.

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // an array consisting of a single DOMString

var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob

console.log(oMyBlob)//Blob {size: 32, type: "text/html"}

Blob() 생성자는 새로운 Blob 객체를 반환한다.(MDN 참조)

new RegExp(ab+c/,'i')

정규표현식 생성자

두번째에 작성한 알파벳 ->>> 'g'-문자열 전체 확인 'i'-문자열에서 대소문자 구분 x

.match()

문자열이 정규식과 매치되는 부분 검색

.replace(정규식,대체되는 string(정규식이 아닌 글자로 치환))

어떤 패턴 일치하는 부분에 새로운 문자열 반환