728x90
728x90
요약
검색하면 json 데이터에서 city나 state 이름을 찾아 결과를 보여준다.
카피할 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Type Ahead 👀</title>
<link rel="stylesheet" href="main.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 src="main.js"></script>
</body>
</html>
html {
box-sizing: border-box;
background: #ffc600;
font-family: "helvetica neue";
font-size: 20px;
font-weight: 200;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
input {
width: 100%;
padding: 20px;
}
.search-form {
max-width: 400px;
margin: 50px auto;
}
input.search {
margin: 0;
text-align: center;
outline: 0;
border: 10px solid #f7f7f7;
width: 120%;
left: -10%;
position: relative;
top: 10px;
z-index: 2;
border-radius: 5px;
font-size: 40px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
}
.suggestions {
margin: 0;
padding: 0;
position: relative;
/*perspective: 20px;*/
}
.suggestions li {
background: white;
list-style: none;
border-bottom: 1px solid #d8d8d8;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
margin: 0;
padding: 20px;
transition: background 0.2s;
display: flex;
justify-content: space-between;
text-transform: capitalize;
}
.suggestions li:nth-child(even) {
transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
background: linear-gradient(to bottom, #ffffff 0%, #efefef 100%);
}
.suggestions li:nth-child(odd) {
transform: perspective(100px) rotateX(-3deg) translateY(3px);
background: linear-gradient(to top, #ffffff 0%, #efefef 100%);
}
span.population {
font-size: 15px;
}
.hl {
background: #ffc600;
}
const endpoint =
"https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json";
const cities = [];
fetch(endpoint)
.then(blob => blob.json())
.then(data => cities.push(...data));
findMatches = (wordToMatch, cities) =>
cities.filter(place => {
// 매치되는 검색어 추출
const regex = new RegExp(wordToMatch, "gi");
// 매치되는 city나 state를 반환
return place.city.match(regex) || place.state.match(regex);
});
numberWithCommas = x => {
// 숫자에 1000단위로 쉼표 넣기
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
displayMatches = e => {
const word = e.target.value;
const matchArray = findMatches(word, cities);
const html = matchArray
.map(place => {
const regex = new RegExp(word, "gi");
const cityName = place.city.replace(
regex,
`<span class="hl">${word}</span>`
);
const stateName = place.state.replace(
regex,
`<span class="hl">${word}</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);
json 데이터 구조
해설 참고
[JavaScript] 🤳 JavaScript로 정규표현식을 이용한 검색창 구현하기
🤳 Day6 - JavaScript로 정규표현식을 이용한 검색창 구현하기 JavaScript 30의 여섯 번째 프로젝트는 정규표현식을 이용하여 검색창을 구현하는 프로젝트입니다. 😃 HTML 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 1.
geonlee.tistory.com
Javascript_30_06
벌써 30개 프로젝트 중에 6번째 시간입니다. 벌써 20%나 했네요!꼭 30개 모두 정리해서 포스팅 하는 날 까지.. 열심히 해보겠습니다. ✍힘내자구요!🤘Day 06 project는 정말 모르는 것 투성이였고, 그
velog.io
728x90
728x90
'Javascript' 카테고리의 다른 글
| [JS] 모달vs 모달리스(modal, modeless) (0) | 2021.01.29 |
|---|---|
| [JS] 콜론(:) 객체 리터럴 (0) | 2021.01.20 |
| script 태그 동적 추가 (0) | 2020.12.16 |
| css 동적 로딩방식 (0) | 2020.12.09 |
| JS 확인 취소 팝업창 띄우기 (0) | 2020.11.30 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
