css代码
1 .search {
2 width: 300px;
3 height: 80px;
4 margin: 0 auto;
5 position: relative;
6 }
7
8 .con {
9 display: none;
10 position: absolute;
11 top: 5px;
12 line-height: 20px;
13 font-size: 18px;
14 width: 280px;
15 border: 1px solid rgba(0, 0, 0, 2);
16 padding: 5px 0;
17 box-shadow: 0 2px 4px rgba(0, 0, 0, 2);
18 color: #333;
19 }
20
21 .jd {
22 position: absolute;
23 top: 50px;
24 width: 280px;
25 height: 20px;
26 }
27
28 .con::before {
29 content: '';
30 width: 0;
31 height: 0;
32 position: absolute;
33 top: 28px;
34 left: 18px;
35 border: 8px solid #000;
36 border-style: solid dashed dashed;
37 border-color: #fff transparent transparent;
38 }
HTML代码
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
JS代码
1 var con = document.querySelector('.con')
2 var jd_input = document.querySelector('.jd')
3 jd_input.addEventListener('keyup', function () {
4 if (this.value == '') {
5 con.style.display = 'none'
6 } else {
7 con.style.display = 'block'
8 con.innerHTML = this.value;
9 }
10 // 当失去焦点就隐藏盒子
11 jd_input.addEventListener('blur', function () {
12 con.style.display = 'none'
13 })
14 jd_input.addEventListener('focus', function () {
15 if (this.value !== '') {
16 con.style.display = 'block'
17 }
18 })
19 })