Skip to content

Commit 2c959dc

Browse files
soyainesoyaine
committed
new 06 file
1 parent ebeabed commit 2c959dc

File tree

5 files changed

+109
-5
lines changed

5 files changed

+109
-5
lines changed

‎06 - Type Ahead/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# 06 JS 实现快速匹配指南
2+
3+
> 作者：©[缉熙Soyaine](https://github.com/soyaine)
4+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 6 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
5+
6+
## 实现效果
7+
8+
![仿即时搜索诗句效果](https://cl.ly/3k3E0N3X3F3E/Screen%20recording%202016-12-31%20at%2009.34.26%20PM.gif)
9+
10+
在输入框中输入一个词，迅速展示含有这个词的诗句。

‎06 - Type Ahead/index-FINISHED.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Type Ahead 👀</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<form class="search-form">
11+
<input type="text" class="search" placeholder="City or State">
12+
<ul class="suggestions">
13+
<li>Filter for a city</li>
14+
<li>or a state</li>
15+
</ul>
16+
</form>
17+
<script>
18+
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
19+
20+
const cities = [];
21+
fetch(endpoint)
22+
.then(blob => blob.json())
23+
.then(data => cities.push(...data));
24+
25+
function findMatches(wordToMatch, cities) {
26+
return cities.filter(place => {
27+
// here we need to figure out if the city or state matches what was searched
28+
const regex = new RegExp(wordToMatch, 'gi');
29+
return place.city.match(regex) || place.state.match(regex)
30+
});
31+
}
32+
33+
function numberWithCommas(x) {
34+
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
35+
}
36+
37+
function displayMatches() {
38+
const matchArray = findMatches(this.value, cities);
39+
const html = matchArray.map(place => {
40+
const regex = new RegExp(this.value, 'gi');
41+
const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
42+
const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
43+
return `
44+
<li>
45+
<span class="name">${cityName}, ${stateName}</span>
46+
<span class="population">${numberWithCommas(place.population)}</span>
47+
</li>
48+
`;
49+
}).join('');
50+
suggestions.innerHTML = html;
51+
}
52+
53+
const searchInput = document.querySelector('.search');
54+
const suggestions = document.querySelector('.suggestions');
55+
56+
searchInput.addEventListener('change', displayMatches);
57+
searchInput.addEventListener('keyup', displayMatches);
58+
59+
</script>
60+
</body>
61+
</html>

‎06 - Type Ahead/index-SOYAINE.html

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Type Ahead 👀</title>
5+
<title>Ajax Type Ahead 👀</title>
66
<link rel="stylesheet" href="style.css">
77
</head>
88
<body>
99

1010
<form class="search-form">
11-
<input type="text" class="search" placeholder="诗句 抑或 诗名">
11+
<input type="text" class="search" placeholder="诗句 诗名 诗人">
1212
<ul class="suggestions">
1313
<li>输入词句，找一首诗</li>
1414
<li></li>
@@ -29,7 +29,9 @@
2929
return poetrys.filter(poet => {
3030
// 找出匹配的诗句
3131
const regex = new RegExp(wordToMatch, 'gi');
32-
return poet.detail_text.match(regex) || poet.title.match(regex);
32+
let author = poet.detail_author.join('');
33+
console.log(author);
34+
return poet.detail_text.match(regex) || poet.title.match(regex) || author.match(regex);
3335
});
3436
}
3537

@@ -47,11 +49,14 @@
4749

4850
function displayMatches() {
4951
const matches = findMatches(this.value, poetrys);
52+
const regex = new RegExp(this.value, 'gi');
5053
const html = matches.map( poet => {
51-
const text = poet.detail_text.replace(this.value, `<span class="hl">${ this.value }</span>`);
54+
const text = poet.detail_text.replace(regex, `<span class="hl">${ this.value }</span>`);
55+
const title = poet.title.replace(regex, `<span class="hl">${ this.value }</span>`)
5256
return `
5357
<li>
5458
<span class="poet">${ text }</span>
59+
<span class="title">${ title } - ${ poet.detail_author[0] }</span>
5560
</li>
5661
`;
5762
}).join('');

‎06 - Type Ahead/index-START.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Type Ahead 👀</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<form class="search-form">
11+
<input type="text" class="search" placeholder="City or State">
12+
<ul class="suggestions">
13+
<li>Filter for a city</li>
14+
<li>or a state</li>
15+
</ul>
16+
</form>
17+
<script>
18+
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
19+
20+
</script>
21+
</body>
22+
</html>

‎06 - Type Ahead/style.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
html {
22
box-sizing: border-box;
33
background:hsla(193, 30%, 64%, 0.78);
4-
font-family:'Kaiti', 'helvetica neue';
4+
font-family: 'Kaiti', 'SimHei', 'Hiragino Sans GB ', 'helvetica neue';
55
font-size: 20px;
66
font-weight: 200;
77
}
@@ -75,6 +75,12 @@ span.info {
7575
font-size: .8em;
7676
/* right: 0;*/
7777
}
78+
span.title {
79+
color: #7c8e94;
80+
position: absolute;
81+
right: 5px;
82+
bottom: 1px;
83+
}
7884

7985
.details {
8086
text-align: center;

0 commit comments

Comments
 (0)