14
14
< li > </ li >
15
15
</ ul >
16
16
</ form >
17
- < script >
18
- // const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
17
+ < script >
18
+ // const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
19
19
20
20
const endpoint = 'https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json' ;
21
-
22
-
23
- const poetrys = [ ] ;
21
+
22
+
23
+ const poetrys = [ ] ;
24
24
fetch ( endpoint )
25
- . then ( blob => blob . json ( ) )
26
- . then ( data => poetrys . push ( ...data ) ) ;
27
-
28
- function findMatches ( wordToMatch , poetrys ) {
29
- return poetrys . filter ( poet => {
30
- // 正则找出匹配的诗句
31
- const regex = new RegExp ( wordToMatch , 'gi' ) ;
32
- const author = poet . detail_author . join ( '' ) ;
33
- // console.log(author);
34
- return poet . detail_text . match ( regex ) || poet . title . match ( regex ) || author . match ( regex ) ;
35
- } ) ;
36
- }
25
+ . then ( blob => blob . json ( ) )
26
+ . then ( data => poetrys . push ( ...data ) ) ;
27
+
28
+ function findMatches ( wordToMatch , poetrys ) {
29
+ return poetrys . filter ( poet => {
30
+ // 正则找出匹配的诗句
31
+ const regex = new RegExp ( wordToMatch , 'gi' ) ;
32
+ const author = poet . detail_author . join ( '' ) ;
33
+ // console.log(author);
34
+ return poet . detail_text . match ( regex ) || poet . title . match ( regex ) || author . match ( regex ) ;
35
+ } ) ;
36
+ }
37
37
38
- function displayMatches ( ) {
39
- const matches = findMatches ( this . value , poetrys ) ;
40
- const regex = new RegExp ( this . value , 'gi' ) ;
41
- const html = matches . map ( poet => {
42
- // 替换高亮的标签
43
- const text = poet . detail_text . replace ( regex , `<span class="hl">${ this . value } </span>` ) ;
44
- const title = poet . title . replace ( regex , `<span class="hl">${ this . value } </span>` )
45
- // 构造 HTML 值
46
- return `
38
+ function displayMatches ( ) {
39
+ const matches = findMatches ( this . value , poetrys ) ;
40
+ const regex = new RegExp ( this . value , 'gi' ) ;
41
+ const html = matches . map ( poet => {
42
+ // 替换高亮的标签
43
+ const text = poet . detail_text . replace ( regex , `<span class="hl">${ this . value } </span>` ) ;
44
+ const title = poet . title . replace ( regex , `<span class="hl">${ this . value } </span>` )
45
+ // 构造 HTML 值
46
+ return `
47
47
<li>
48
48
<span class="poet">${ text } </span>
49
49
<span class="title">${ title } - ${ poet . detail_author [ 0 ] } </span>
50
50
</li>
51
51
` ;
52
- } ) . join ( '' ) ;
53
- // console.log(html);
54
- suggestions . innerHTML = html ;
55
- }
56
-
57
- const search = document . querySelector ( '.search' ) ;
58
- const suggestions = document . querySelector ( '.suggestions' ) ;
59
-
60
- search . addEventListener ( 'change' , displayMatches ) ;
61
- search . addEventListener ( 'keyup' , displayMatches ) ;
62
-
63
- // console.log(poetrys);
64
- </ script >
65
- </ body >
66
- </ html >
67
-
68
-
69
-
70
-
71
-
52
+ } ) . join ( '' ) ;
53
+ // console.log(html);
54
+ suggestions . innerHTML = html ;
55
+ }
72
56
57
+ const search = document . querySelector ( '.search' ) ;
58
+ const suggestions = document . querySelector ( '.suggestions' ) ;
73
59
60
+ search . addEventListener ( 'change' , displayMatches ) ;
61
+ search . addEventListener ( 'keyup' , displayMatches ) ;
74
62
63
+ // console.log(poetrys);
64
+ </ script >
65
+ </ body >
66
+ </ html >
0 commit comments