1414 < li > </ li >
1515 </ ul >
1616 </ 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';
1919
2020 const endpoint = 'https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json' ;
21-
22-
23- const poetrys = [ ] ;
21+ 22+ 23+ const poetrys = [ ] ;
2424 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+ }
3737
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 >${ this . value } ) ;
44- const title = poet . title . replace ( regex , `<span class="hl">${ this . value } )
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 } ) ;
44+ const title = poet . title . replace ( regex , `<span class="hl">${ this . value } )
45+ // 构造 HTML 值
46+ return `
4747 <li>
4848 <span class="poet">${ text }
4949 <span class="title">${ title } ${ poet . detail_author [ 0 ] }
5050 </li>
5151 ` ;
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+ }
7256
57+ const search = document . querySelector ( '.search' ) ;
58+ const suggestions = document . querySelector ( '.suggestions' ) ;
7359
60+ search . addEventListener ( 'change' , displayMatches ) ;
61+ search . addEventListener ( 'keyup' , displayMatches ) ;
7462
63+ // console.log(poetrys);
64+ </ script >
65+ </ body >
66+ </ html >
0 commit comments