模拟实现百度搜索框
程序员文章站
2022-03-11 09:15:46
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>海量点</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
*{margin: 0;padding: 0;}
li{
list-style: none;
line-height: 30px;
}
.wrap{
width: 100%;
display: flex;
justify-content: center;
}
.wrap .box{
display: flex;
margin-top: 40px;
align-items: center;
}
.inputBox{
position: relative;
}
.ulBox{
width:calc(100% - 42px);
/* width: 460px; */
position: absolute;
border: 2px solid #4e6ef2;
border-top: 0;
/* padding-left: 20px; */
border-radius: 0 0 10px 10px;
padding: 20px;
}
.ulBox li:hover{
color: #4e6ef2;
cursor: pointer;
}
.wrap .box .inputBox input{
margin: 0;
/* width: 480px; */
border: none;
height: 36px;
border: 2px solid #c4c7ce;
border-radius: 10px 0 0 10px;
border-right: 0;
overflow: visible;
padding-left: 20px;
}
.wrap .box .inputBox input:focus {
outline:none;
border: 2px solid #4e6ef2;
border-right: 0;
}
.wrap .box .inputBox .iptClass{
border-radius: 10px 0 0 0;
}
.wrap .searchBtn{
cursor: pointer;
width: 112px;
height: 40px;
line-height: 41px;
line-height: 40px\9;
background-color: #4e6ef2;
border-radius: 0 10px 10px 0;
font-size: 17px;
box-shadow: none;
font-weight: 400;
border: 0;
outline: 0;
letter-spacing: normal;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<div class="box">
<div class="inputBox">
<input type="text" :class="{iptClass:isShow}" v-model="val" placeholder="请输入搜索" @input="inputEvents($event)"
autofocus="autofocus" @keyup.enter="enterEvent" @blur.prevent="changeCount()" />
<ul class="ulBox" v-show="isShow">
<li v-for="(item,index) in arr" :key="item.sa" @click="tapLi(item.q)">
{{item.q}}
</li>
</ul>
</div>
<div class="searchBtn" @click="tap">
搜索一下
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
isShow: false, //是否展示下拉菜单
val: "",
arr: [],
msg: "22"
},
methods: {
//输入事件
inputEvents() {
var that = this;
//清空
if (!that.val.trim()) {
that.isShow = false;
that.arr = [];
}
$.ajax({
type: "get",
url: `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&&wd=${this.val}`,
dataType: "jsonp",
success: function(data) {
if (data.g) {
that.isShow = true;
that.arr = [...data.g];
// console.log(that.arr)
}
}
});
},
//查询
tap() {
if (!this.val.trim()) {
alert("请输入搜索值");
this.val = ""
return false
}
window.open(
`https://www.baidu.com/s?ie=utf-8&csq=1&pstg=20&mod=2&isbd=1&cqid=9d64b85900019797&istc=305&ver=0AttG210Peraje7amqHNye9Z20Z5ZC7VDIW&chk=5fbf7ccc&isid=a8c56ebf00060049&ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=${this.val}`,
"_blank");
this.val = ""
},
//enter触发
enterEvent() {
window.open(
`https://www.baidu.com/s?ie=utf-8&csq=1&pstg=20&mod=2&isbd=1&cqid=9d64b85900019797&istc=305&ver=0AttG210Peraje7amqHNye9Z20Z5ZC7VDIW&chk=5fbf7ccc&isid=a8c56ebf00060049&ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=${this.val}`,
"_blank");
this.val = ""
},
//失去焦点
changeCount() {
setTimeout(() => {
this.isShow = false;
}, 300)
},
//点击菜单搜索
tapLi(val) {
window.open(
`https://www.baidu.com/s?ie=utf-8&csq=1&pstg=20&mod=2&isbd=1&cqid=9d64b85900019797&istc=305&ver=0AttG210Peraje7amqHNye9Z20Z5ZC7VDIW&chk=5fbf7ccc&isid=a8c56ebf00060049&ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=${val}`,
"_blank");
this.val = ""
}
}
})
</script>
</html>
本文地址：https://blog.csdn.net/qq_43069664/article/details/110224256
上一篇： java实现打字游戏小程序
下一篇： html怎么注释单行