效果展示
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
background-color: #333;
}
#box{
width:500px;
height: 30px;
margin: 200px auto;
border: 1px solid #000;
position: relative;
}
ul{
float: left;
width: 20%;
height: 100%;
background-color: #e4393c;
list-style: none;
}
ul>li{
text-align: center;
background-color: #e4393c;
float: left;
width:100%;
cursor: pointer;
line-height: 30px;
height: 100%;
display: none;
color: #fff;
}
ul>li:first-child{
margin-bottom: 10px;
display: block;
}
input{
width: 60%;
background-color: #fff;
text-indent: 10px;
float: left;
height:100%;
border: none;
}
button{
float: left;
width: 20%;
height:100%;
background-color: #f00;
border: none;
vertical-align: center;
cursor: pointer;
color: #fff;
}
ol.result{
list-style: none;
width: 60%;
box-sizing: border-box;
position: absolute;
top: 30px;
border: 1px solid #ccc;
left:20%;
margin-top: -1px;
}
ol.result>li{
height: 30px;
background-color:#fff;
text-indent: 10px;
line-height: 30px;
border-bottom: 1px solid #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<div id="box">
<ul class="web">
<li>百度</li>
<li>百度</li>
<li>三六零</li>
</ul>
<input type="text" placeholder="请输入搜索内容">
<button>提交</button>
<ol class="result">
<!-- <li>哈哈</li> -->
</ol>
</div>
<script src="jquery-1.12.0.js"></script>
<script>
$(function () {
var boo = true;
$("ul>li").click(function (event) {
if (boo) {
$("ul>li").show();
boo = false;
} else {
$("ul>li").eq(0).html($(this).html()).siblings('li').hide();
boo = true;
}
});
$("input")[0].oninput=function () {
if ($("ul>li:first-child").html() == "百度") {
$.ajax({
url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1460,21080,29064,28519,29099,28722,28964,28832,28585,26350&wd=" + $("input").val() + "&csor=2&pwd=nide&",
dataType: "jsonp",
jsonp: "cb",
success: function (data) {
$("ol").empty();
var arr = data.g?data.g:[];
var aaa=arr.length>0?arr.length:0;
for (var i = 0; i < aaa; i++) {
var $newli = $("<li></li>");
$newli.html(arr[i].q);
$("ol").append($newli);
}
}
})
} else if ($("ul>li:first-child").html() == "三六零") {
$.ajax({
url: "https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=" + $("input").val() + "&huid=10NRAeE9rdeMRe4pqbdHXQ8adyRCAwO57b4WtR9xZ163Q=",
dataType: "jsonp",
success: function (data) {
$("ol").empty();
var arr = data.result?data.result:[];
var aaa=arr.length>0?arr.length:0;
for (var i = 0; i < aaa; i++) {
var $newli = $("<li></li>");
$newli.html(arr[i].word);
$("ol").append($newli);
}
}
})
}
}
//搜索结果点击事件
$("ol").on('click', 'li', function(event) {
$("input").val($(this).html());
$("ol").empty();
/* Act on the event */
});
//搜索按钮点击事件
$("button").click(function(){
if($("ul>li:first-child").html() == "百度"){12
var word=$("input").val();
location.assign("https://www.baidu.com/s?tn=02003390_43_hao_pg&isource=infinity&iname=baidu&itype=web&ie=utf-8&wd="+word);
}else if($("ul>li:first-child").html()=="三六零"){
var word=$("input").val();
location.assign("https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&q="+word);
}
})
})
</script>
</body>
</html>
简述
知识点很简单,我通过控制台看到了百度搜索时候服务器返回给我们的数据, 然后我把数据地址放到我的网页里面,通过js改变搜索的关键词
至于点击跳转搜索,是通过跳转到新网页实现的,也是在地址该了关键词
(*￣︶￣)
有问题可以留言沟通,转载请注明出处,尊重原创
