动态搜索框和具体搜索逻辑#

前端搜索框实现：#

#html#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>动态搜索栏</title>
7
</head>
8
<body>
9
    <div class="searchBar" id="searchBar">
10
        <input type="text" class="input" id='input'>
11
        <a href="#" class="img" id='img'>
12
            <img src="搜索框.png" style="width: 30px;">
13
        </a>
14
        <div class="results" id="results"></div>
15
    </div>
16
</body>
17
</html>

#css#

1
.searchBar{
2
    position:absolute;
3
    transform: translate(-50%,-50%);/*将元素移动到父元素的中心*/
4
    background-color:#000000;
5
    height:40px;
6
    border-radius:40px;
7
    padding:10px;
8
    width: 40px;
9
    top: 50%;
10
    left: 50%;
11
}
12
.input{
13
    border:none;
14
    background:none;
15
    outline:none;
16

17
    width:0;
18
    padding:0;
19
    line-height:40px;
20
    font-size:20px;
21
    color:wheat;
22
}
23
.img{
24
    color:red;
25
    float:right;/*把控不好位置，最后发现一个float就搞定了*/
26
    border-radius: 50%;
27
    background-color: #000000;
28
    display: flex;
29
    justify-content: center;
30
    align-items: center;
31
    transition: 0.4s;
32
    width: 40px;
33
    height: 40px;
34
}
35
.addfocus{
36
    width: 200px;
37
    padding: 0 6px;
38
    transition: 1s;
39
}
40
.addfocusInput{/*解决了图片换行的问题*/
41
    width: 140px;
42
    padding: 0 6px;
43
    transition: 1s;
44
}
45
.nofocus{/*保证与初始状态一致*/
46
    width: 40px;
47
    padding: 10px;
48
    transition: 1s;
49
}
50
.nofocusInput{
51
    width: 0;
52
    padding: 0;
53
    transition: 1s;
54
}
55
.results {
56
    margin-top: 20px;
57
    color: #000000;
58
}

#js.1#

1
const input = document.querySelector('.input')
2
const search = document.querySelector('.searchBar')
3
const img = document.querySelector('.img')
4
img.addEventListener('mouseenter',()=>{
5
  input.classList.add('addfocusInput');
6
  search.classList.add('addfocus');
7
  input.classList.remove('nofocusInput');
8
  search.classList.remove('nofocus');
9
})
10
img.addEventListener('click',()=>{
11
  input.classList.add('nofocusInput');
12
  search.classList.add('nofocus');
13
  input.classList.remove('addfocusInput');
14
  search.classList.remove('addfocus');
15
})

由于初始状态只能看见img，故采用这种形式。

主要实现逻辑为：鼠标移动到搜索图标内，搜索框展开，再次点击搜索图标，搜索框合上。

为什么不使用hover？#

使用hover的话，实现逻辑就更加清晰，而且根本不需要js部分，代码看上去也更加简洁。然而我在实际测试时，发现中文输入会导致丢失hover属性，导致搜索栏意外折叠，虽然能输入，但是观感很不好。

我测试时使用微软拼音输入法。由于我没有测试更多的输入法，感兴趣的可以测试一下使用hover来代替JavaScript事件监听时，自己输入中文时具体是什么效果。如果没有出现bug当然是最好的。

但我仍然建议使用js监听，因为大型项目或者个人网站是要给别人看的，当然要选择普适性最好、照顾大部分用户体验的方案。

为什么会丢失hover？#

在使用中文输入法的时候，尤其是使用拼音输入时会出现这个情况。我的情况是输入法界面干扰：拼音输入时，汉字选择框虽然是贴在文字下方的，但是其实际体积要大一点——约为半个字母的高度，这时鼠标如果在这个范围里，模块就会因为覆盖而失去hover。

简单搜索逻辑：#

#js.2#

1
document.getElementById('searchBar').addEventListener('mouseenter', function() {
2
    const inputtxt = document.getElementById('input').value;
3
    const resultsDiv = document.getElementById('results');
4
    resultsDiv.innerHTML = '';
5
    const data = ['每日一题','学习笔记','问题解决'];//数据源
6

7
if(inputtxt){//否则会出现很可怕的后果，不信可以删去这个if！
8
    const results = data.filter(item => item.includes(inputtxt));
9
    if (results.length > 0) {
10
        results.forEach(item => {
11
            const p = document.createElement('p');
12
            p.textContent = item;
13
            resultsDiv.appendChild(p);
14
        });
15
    } else {
16
        resultsDiv.textContent = '没有结果';
17
    }
18
}
19
});