DAY 6-Type Ahead

CODE

インプリメンテーション:検索ウィンドウ(inputbox)にテキストを入力し、そのテキストを含むアメリカの都市をリストします.
1)空の配置都市宣言->fetch()関数を使用してエンドポイントからデータを取得し、都市レイアウトにコピーする

const cities = [];
fetch(endpoint)
  .then((data) => data.json())
  .then((data) => cities.push(...data));

の場合、json()メソッドを使用して、要求がエンドポイントに送信後に受信可能な応答データを承諾状態

に戻す.
2)findMatches()関数宣言->filter()メソッドを使用して都市配列をフィルタする

function findMatches(wordToMatch, cities) {
	const target = new RegExp(wordToMatch, "gi");
	return cities.filter(
		(place) => place.city.match(target) || place.state.match(target)
	);
}

RegExpオブジェクト宣言後にターゲット変数に割り当てます(「gi」オプションの追加->g:文字列全体のチェック(グローバルナビゲーション)、i:文字列の大文字と小文字の区別なし)

cities配列のcity名またはステータス名は、ユーザが入力した単語(wordToMatch)と比較して、その単語がcity、stateに含まれている場合にのみフィルタリングされ、

に戻る.
3)displayMatches()関数宣言->findMatches()関数のthis.value(input value)とcities(都市情報を含むjson)をパラメータとして挿入->入力クエリに一致する都市配列を返しmatchedcities変数に割り当てる

function displayMatches() {
	const matchedCities = findMatches(this.value, cities);
}

4)RegExpオブジェクトを作成し、画面にユーザーが入力したテキストを強調表示します.変数inputWordにvalueをgiオプションとして割り当てる

function displayMatches() {
	const matchedCities = findMatches(this.value, cities);
	const inputWord = new RegExp(this.value, "gi");
	const html = matchedCities
		.map((place) => {
			const highlightedCity = place.city.replace(inputWord,
			`<span class="hl">${this.value}</span>`
			);
			const highlightedState = place.state.replace(inputWord,
			`<span class="hl">${this.value}</span>`
		);
	})
}

変数html宣言後、matchedCitiesはmap()メソッドとreplace()メソッドを使用して、配列内のinputWordに一致する要素を囲みます.valueで置き換え、highlightedCityという変数に割り当てます.

stateは変数highlightedStateに同じように割り当てられます

5)spanとliタグを使用してmap()内部で生成されたハイライトされた都市、ハイライトされた状態、および都市の人口数(place.population)を囲み、return->ユーザーが入力した単語部分がhtml変数にハイライトされた検索結果リストを割り当てます.

function displayMatches() {
	const matchedCities = findMatches(this.value, cities);
	const inputWord = new RegExp(this.value, "gi");
	const html = matchedCities
		.map((place) => {
			const highlightedCity = place.city.replace(inputWord,
			`<span class="hl">${this.value}</span>`
			);
			const highlightedState = place.state.replace(inputWord,
			`<span class="hl">${this.value}</span>`
			);
			return `
				<li>
					<span class="name">${highlightedCity}, ${highlightedState}</span>
					<span class="population">${place.population}</span>
				</li>
				`;
		})
}

6)join()メソッドを使用して、すべてのliラベル要素join->推奨変数を作成した後.推奨要素の割り当て->推奨.innerHTML=htmlはhtmlをliタグ要素に割り当て、htmlを通じて熊色の結果を提案します.

function displayMatches() {
	const matchedCities = findMatches(this.value, cities);
	const inputWord = new RegExp(this.value, "gi");
	const html = matchedCities
		.map((place) => {
			const highlightedCity = place.city.replace(inputWord,
			`<span class="hl">${this.value}</span>`
			);
			const highlightedState = place.state.replace(inputWord,
			`<span class="hl">${this.value}</span>`
			);
			return `
				<li>
					<span class="name">${highlightedCity}, ${highlightedState}</span>
					<span class="population">${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);

検索ウィンドウ(.search)をsearchInput変数に割り当てて変更し、イベントlisten

がkeyupイベントが発生したときにdisplayMatches関数を実行するようにします.