<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
padding: 0px;margin: 0px;}
html
{
background-color: rgb(145,182,195);
font-family: 'Kaiti', 'SimHei', 'Hiragino Sans GB ', 'helvetica neue';
font-weight: 200;
}
body
{
display: flex;
justify-content: center;
}
.search-form {
display: flex;
flex-direction: column;/*主轴为y,垂直的*/
align-items: center;/*测轴x居中*/
}
input.search
{
padding: 20px;
font-family: 'Kaiti', 'helvetica neue';
border: 10px solid #f7f7f7;
font-size: 40px;
text-align: center;
border-radius: 5px;
position: relative;
top: 10px;
left: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.12),inset 0 0 2px rgba(0,0,0,0.19);
width: 120%;
}
.suggestions
{
position: relative;
top: 7px;
width: 100%;
}
.suggestions li
{
background: white;
list-style: none;
border-bottom: 1px solid #d8d8d8;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
}
span.title {
margin-right: 20px;
text-align: right;
color: #7c8e94;
margin-top: 5px;
}
span.hl {
color: green;
}
.suggestions li:nth-child(even) {
transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
background: linear-gradient(to bottom, #ffffff 0%, #efefef 100%);
}
/*奇数匹配*/
.suggestions li:nth-child(odd) {
transform: perspective(100px) rotateX(-3deg) translateY(3px);
background: linear-gradient(to top, #ffffff 0%, #efefef 100%);
}
</style>
</head>
<body>
<form action="
" class="search-form">
<input type="text" class="search" placeholder="诗人名字,关键字">
<ul class="suggestions">
<li>输入词句,找一首诗</li>
<li></li>
</ul>
</form>
<script type="text/javascript">
const endpoint =
'https://gist.githubusercontent.com/liyuechun/f00bb31fb8f46ee0a283a4d182f691b4/raw/3ea4b427917048cdc596b38b67b5ed664605b76d/TangPoetry.json';
const poetrys=[];
//第一:下载数据,然后解析成json格式,然后是保存进数组中.
fetch(endpoint).then(responseData=>
{
return responseData.json();
}).then(data=>
{
poetrys.push(...data);
});
function findMatches(wordToMatch, poetrys)//输入的文字与json数据
{
//正则找出匹配的数据.
return poetrys.filter(poet=>//正则的数据
{
const regex=new RegExp(wordToMatch,"gi");//不区分大小写,全局匹配(能找到的都找.)
const author=poet.detail_author.join("");//意思是: poetrys数组中的元素变成字符串.
return poet.detail_text.match(regex)||poet.title.match(regex)||author.match(regex);//找出诗句中某一段是否与输入的相匹配或者诗名与输入的相匹配.或者作者与输入的是否相匹配.
//因为作者是数组形式,所以要转换成字符串形式啊.
});
}
function displayMatches()
{
const matches=findMatches(this.value,poetrys);
const regex=new RegExp(this.value,"gi");
const html=matches.map(poet=>
{
const text=poet.detail_text.replace(regex, `<span class="h1">${
this.value}</span>`);
const title = poet.title.replace(regex, `<span class="hl">${
this.value }</span>`);
const detail_author = poet.detail_author[0].replace(regex, `<span class="hl">${
this.value }</span>`);
//这上面的是把匹配的换成亮亮的有颜色的字.
return `<li>
<span class="poet">${
text }</span>
<span class="title">${
title } - ${
detail_author }</span>
</li>`;
}).join();//全部转换成字符串。
suggestions.innerHTML=html;
}
const search=document.querySelector(".search");
const suggestions=document.querySelector(".suggestions");
search.addEventListener("change",displayMatches);
search.addEventListener('keyup', displayMatches);
</script>
</body>
</html>
js中古诗匹配系统
猜你喜欢
转载自blog.csdn.net/qq_37805832/article/details/109039868
今日推荐
周排行