简易版的搜索,话不多说,直接上代码!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/ajax1.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.title {
display: flex;
margin-left: 10px;
margin-top: 20px;
position: relative;
}
#ti {
width: 130px;
}
input {
width: 500px;
height: 40px;
margin-left: 10px;
outline: none;
}
#photo {
width: 30px;
position: absolute;
top: 10px;
left: 600px;
}
button {
width: 100px;
background-color: #4886F7;
border: none;
color: #fff;
}
.middle{
width: 755px;
background-color: #F8F8F8;
}
ul {
width: 300px;
display: flex;
list-style: none;
height: 50px;
margin-left: 150px;
}
li {
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
}
.active{
border-bottom: 2px solid #001DF7;
}
</style>
</head>
<body>
<div class="title">
<img src="images/logo.jpg" alt="" id="ti">
<input type="text" id="list">
<img src="images/phone.jpg" alt="" id="photo">
<button>百度一下</button>
</div>
<div class="middle">
<ul>
<li class="active">网页</li>
<li>网页</li>
<li>网页</li>
<li>网页</li>
<li>网页</li>
<li>网页</li>
</ul>
</div>
<span id="text"></span>
<script>
var ot=document.getElementById("list");
var oe=document.getElementById("text");
document.getElementsByTagName('button')[0].onclick=function(){
ajax('get','data/wrok1.json',function(res){
var ores=JSON.parse(res);//转为对象
for(var i=0;i<ores.length;i++){
if(ot.value==ores[i].name){//判断输入内容
console.log(ores[i])
}
}
oe.innerHTML=ot.value;
})
}
</script>
</body>
</html>
下面是ajax内容
function ajax(ops,url,fn){
if(window.XMLHttpRequest){
var oajax=new XMLHttpRequest();
}else{
var oajax=new ActiveXObject("Microsoft.XMLHTT");
}
oajax.open(ops,url,true);
oajax.send();
oajax.onreadystatechange=function(){
switch(oajax.readyState){
case 4:
if(oajax.status==200){
fn(oajax.responseText)
}
break;
}
}
}
下面是json内容
[
{
"name": "复仇",
"time": "2019-5-20",
"src": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559016476&di=0dd0ce978ed16d4b5a14c304b191ce14&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-04-23%2F5add7cdc13bb2.jpg",
"synopsis": "故事发生在《复仇者联盟3:无限战争》之后,灭霸使用无限手套的力量,造成全宇宙一半的生命随机消失,有的人永远失去了挚爱和家人,复仇者联盟部分成员也因此消失了。"
},
{
"name": "者",
"time": "2019-5-21",
"src": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559016476&di=0dd0ce978ed16d4b5a14c304b191ce14&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-04-23%2F5add7cdc13bb2.jpg",
"synopsis": "故事发生在《复仇者联盟3:无限战争》之后,灭霸使用无限手套的力量,造成全宇宙一半的生命随机消失,有的人永远失去了挚爱和家人,复仇者联盟部分成员也因此消失了。"
},
{
"name": "联盟",
"time": "2019-5-22",
"src": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559016476&di=0dd0ce978ed16d4b5a14c304b191ce14&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-04-23%2F5add7cdc13bb2.jpg",
"synopsis": "故事发生在《复仇者联盟3:无限战争》之后,灭霸使用无限手套的力量,造成全宇宙一半的生命随机消失,有的人永远失去了挚爱和家人,复仇者联盟部分成员也因此消失了。"
},
{
"name": "我",
"time": "2019-5-23",
"src": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559016476&di=0dd0ce978ed16d4b5a14c304b191ce14&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-04-23%2F5add7cdc13bb2.jpg",
"synopsis": "故事发生在《复仇者联盟3:无限战争》之后,灭霸使用无限手套的力量,造成全宇宙一半的生命随机消失,有的人永远失去了挚爱和家人,复仇者联盟部分成员也因此消失了。"
},
{
"name": "没",
"time": "2019-5-20",
"src": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559016476&di=0dd0ce978ed16d4b5a14c304b191ce14&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-04-23%2F5add7cdc13bb2.jpg",
"synopsis": "故事发生在《复仇者联盟3:无限战争》之后,灭霸使用无限手套的力量,造成全宇宙一半的生命随机消失,有的人永远失去了挚爱和家人,复仇者联盟部分成员也因此消失了。"
},
{
"name": "看",
"time": "2019-5-24",
"src": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559016476&di=0dd0ce978ed16d4b5a14c304b191ce14&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-04-23%2F5add7cdc13bb2.jpg",
"synopsis": "故事发生在《复仇者联盟3:无限战争》之后,灭霸使用无限手套的力量,造成全宇宙一半的生命随机消失,有的人永远失去了挚爱和家人,复仇者联盟部分成员也因此消失了。"
}
]