Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 63463b4

Browse files
Day 06 files
1 parent 86225c0 commit 63463b4

File tree

5 files changed

+9148
-0
lines changed

5 files changed

+9148
-0
lines changed

‎Day 06 - Ajax Type Ahead/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# DEMO OF AJAX TYPE AHEAD

‎Day 06 - Ajax Type Ahead/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Ajax Type Ahead</title>
9+
</head>
10+
<body>
11+
<form class="search-form">
12+
<input type="text" class="search" placeholder="City or State" />
13+
<ul class="suggestions">
14+
<li>Filter for a city</li>
15+
<li>or a state</li>
16+
</ul>
17+
</form>
18+
19+
<script src="index.js"></script>
20+
</body>
21+
</html>

‎Day 06 - Ajax Type Ahead/index.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const cities = [];
2+
3+
// fetching data from the JSON file
4+
fetch("places.json")
5+
.then((response) => response.json())
6+
.then((data) => cities.push(...data));
7+
8+
function findMatches(wordToMatch, cities) {
9+
return cities.filter((place) => {
10+
// here we need to figure out if the city or state matches what was searched
11+
const regex = new RegExp(wordToMatch, "gi"); // here g is going to be global and i is going to be insensitive(about lower and upper cases)
12+
return place.city.match(regex) || place.state.match(regex);
13+
});
14+
}
15+
16+
function numberWithCommas(x) {
17+
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
18+
}
19+
20+
function displayMatches() {
21+
const matchArray = findMatches(this.value, cities);
22+
const html = matchArray
23+
.map((place) => {
24+
const regex = new RegExp(this.value, "gi");
25+
const cityName = place.city.replace(
26+
regex,
27+
`<span class="hl">${this.value}</span>`
28+
);
29+
const stateName = place.city.replace(
30+
regex,
31+
`<span class="hl">${this.value}</span>`
32+
);
33+
return `
34+
<li>
35+
<span class="name">${cityName}, ${stateName}</span>
36+
<span class="name">${numberWithCommas(place.population)}</span>
37+
</li>
38+
`;
39+
})
40+
.join("");
41+
suggestions.innerHTML = html;
42+
}
43+
44+
const searchInput = document.querySelector(".search");
45+
const suggestions = document.querySelector(".suggestions");
46+
47+
searchInput.addEventListener("change", displayMatches);
48+
searchInput.addEventListener("keyup", displayMatches);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /