Ajax Type Ahead 👀 (javascript30 - 6)

javascript를 활용해서 실시간으로 검색 정보를 받아오자. (https://github.com/KIMSG/javascript30/tree/master/day6)

소스에 기본 json데이터는 포함되어 있고 문법만 배우면 된다.

1 2 3

function numberWithCommas(x){       return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');     } Colored by Color Scripter

cs

숫자가 들어오면 3단위씩 나누어 , 를 표시한다.

1 2 3

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

cs

fetch API를 이용해서 AJAX를 대체 하는 것이다.

then만 써주면 복잡한 문법없이 쓸 수 있다.

기본 문법에서는 fetch(url) 이지만 여기서는 data의 url을 바로 넣어서 사용했다.

fetch 활용하기 : https://hjlog.me/post/150

fetch 이해하기 : https://www.zerocho.com/category/HTML/post/595b4bc97cafe885540c0c1c

1 2 3 4 5 6

function findMatches(wordToMatch, cities){   return cities.filter(place => {      const regex = new RegExp(wordToMatch, 'gi');      return place.city.match(regex) || place.state.match(regex)   }); } Colored by Color Scripter

cs

findMatches 함수에서는 인자를 두개를 받는다. 

Filter()는 저번에 array를 실습할 때 배운 함수이다. callback이 ture이면 배열로 새로운 인자를 담는다.

입력받은 단어를 wordToMatch라고 한다.

'new RegExp' 은 정규식으로 생성자를 만들때 사용한다.

RegExp 사용법 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp

입력된 단어를 정규식을 사용하여 대문자, 소문자를 구분하지 않고 regex로 담는다,

city, state 중 동일한 단어가 있으면 반환한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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>`);         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;     } Colored by Color Scripter

cs

위 함수에서 반환된 결과값을 담아 html의 문자열로 만들어 준다.

replace() : 일치하는 부분을 원하는 문자열로 반환합니다. 

replace(‘앞의 내용을 찾으면’, ‘뒤의 내용으로')

replace 사용법: https://www.zerocho.com/category/HTML/post/595b4bc97cafe885540c0c1c

정규식과 일치하는 문자열을 찾을 때마다 span 태그로 치환한다. (그러면 해당 부분만 노란 영역이 된다.)

1 2 3 4 5

const searchInput = document.querySelector('.search'); const suggestions = document.querySelector('.suggestions');   searchInput.addEventListener('change', displayMatches); searchInput.addEventListener('keyup', displayMatches);

cs

searchInput이 change, keyup 될 때마다 해당 함수를 발생시킨다.

addEventListener :  https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

1. abort
2. beforeinput
3. blur : 흐리게
4. click : 클릭
5. compositionstart
6. compositionupdate
7. compositionend
8. dblclick : 더블 클릭
9. error
10. focus
11. focusin
12. focusout
13. input
14. keydown : 키를 누를때
15. keyup : 키를 뗄때
16. load
17. mousedown
18. mouseenter
19. mouseleave
20. mousemove
21. mouseout
22. mouseover
23. mouseup
24. resize
25. scroll
26. select
27. unload
28. wheel

( 알아두어야 할 기능이 많은 것 같다.