[JavaScript30] 🔎06. TYPE AHEAD
31545 ワード
🔎06 TYPE AHEAD
Webから情報を取得し、Live Search機能を実装<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Type Ahead 👀</title>
<link rel="stylesheet" href="style_JuneHyung.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';
</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;
}
🌏 新しく知り合ったもの
👉 text-transform : capitalize
大文字または小文字に置き換えるプロパティで、大文字と小文字をよく使用します.
初めて大文字を見た
大文字:単語の最初のアルファベットを大文字に変更します.
👉 transform: perspective()
パースビューを使用しないとTranslateZの変化は感じられません.
透視図を使うと元手感があり、違いが感じられます.
注意:
https://gahyun-web-diary.tistory.com/80
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
👉 ...
展開構文
羅列データの抽出または接続に使用します.
使用方法は配列またはオブジェクトで、変数名の前に3つの句点(...)があります.入力します.
! 配列、オブジェクト、および関数パラメータ式([]、{}、()でのみ使用されます.
👉 RegExp
パターンを使用してテキストを識別します.RegExpオブジェクトは、文字記号および作成者によって作成できます.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Type Ahead 👀</title>
<link rel="stylesheet" href="style_JuneHyung.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';
</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;
}
/ab+c/i
new RegExp(/ab+c/, 'i') // 리터럴
new RegExp('ab+c', 'i') // 생성자👉 構文(Syntax)
new` `RegExp(pattern [,flags]) ``// 생성자 방식``/pattern/flags ``// 정규표현식 리터럴 👉 パラメータ(Parameters)
パラメータ名データ型必須/オプション説明patternstring必須正規表現flagsオプションg:テキスト全体で一致する文字を検索する場合、指定しない場合、最初の一致する文字iのみを検索する:大文字と小文字を区別しない.m:^(最初の文字)と$(最後の文字)は(n,rで区切られた)行の上に一致します.
👉 説明(Description)
正規表現は、次の場合に使用されます.
\エスケープ^範囲、開始点、$範囲、終了点*数、無以上={0,}+数、1より大きい.{1,}?数、なしまたは1つのみ.マッチング、1文字マッチング(*x*)マッチング、xマッチング、そしてxマッチング.xまたはyに一致するt{n}の数.tおよびnが一致する文字列は、一致するt{n,}の数、tおよびnが一致する文字列は、一致するt{n,m}の数と一致する.tとn回以下のm回の文字列[xyz]が一致する.任意のxyz文字列に一致👉 NumberWithCommas()
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}正規表現を学ぶ必要があります.
/\B(?=(\d{3})+(?!\d))/g\b:非語境界(開始と終了)(\d{3}) :\d:数字文字対応{n}:前述の式nに対応する.+(?!\d) :+:前の式と連続して1回以上繰り返した部分に対応x(?!y):xの後ろにyがない場合にのみxと一致(?!\d)の後ろに数字はありません.(?=~):すべての前後条件を満たす.🌏 プロセス
👉 1.都市と州の名前と人口を獲得した。
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
const cities =[];
// const porm = fetch(endpoint);
// console.log(porm);
// fetch(endpoint).then(blob => console.log(blob));
fetch(endpoint)
.then(blob => blob.json())
.then(data=> cities.push(...data));
都市に直接データを入れようとしたときにエラーが発生しました
タイプが違うから起こったようです.
fetch(endpoint)
.then(blob => blob.json())
.then(data=> cities = data);Uncaught (in promise) TypeError: Assignment to constant variable. 발생👉 2.検索時に一致する値を検索する関数
function findMatches(wordToMatch, cities){
return cities.filter(place => {
// here we need to figure out if the city on state matches what was searched
// 여기서 우리는 주의 도시가 검색되는 것과 일치하는 지 알아 내야합니다.
const regex = new RegExp(wordToMatch, 'gi');
return place.city.match(regex) || place.state.match(regex);
})
}つまり、RegExpは検索時にモードを設定できる作成者であり、giは検索時に大文字と小文字を区別しない.
g i m貼って使えますか!
👉 3.画面に表示させる関数。
function displayMatches(){
// console.log(this.value);
const matchArray = findMatches(this.value, cities);
// console.log(matchArray);
const html = matchArray.map(place => {
const regex = new RegExp(this.value, 'gi');
const cityName = place.city.replace(regex, `<span classs="h1"> ${this.value}</span>`);
const stateName = place.state.replace(regex, `<span classs="h1"> ${this.value}</span>`);
return `
<li>
<span class="name">${cityName}, ${stateName}</span>
<span class="population">${numberWithCommas(place.population)}</span>
</li>`
}).join('');
suggestions.innerHTML = html;
}this.value)を受信した都市(cities)と一致させ、matchArrayに保存します.const matchArray = findMatches(this.value, cities);displayMatchesにはhtmlコンテンツをスクリプトとしてsuggenstionsに挿入するすべてのプロセスが含まれています.
👉 4.数字の3桁ごとのカンマ(,)
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}👉 5.リアルタイム出力。
inputの値が変化した場合、およびKeyupイベントが発生するたびに、表示マッピングが変化します.
searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);Reference
この問題について([JavaScript30] 🔎06. TYPE AHEAD), 我々は、より多くの情報をここで見つけました https://velog.io/@cjh951114/JavaScript30-06.-TYPE-AHEADテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol