SimpleSearch/testInp.html at master · urrrich/SimpleSearch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testInp</title>
    <style>
        input{
            width: 70%;
        }
        ul{

            margin-top: 0;
            margin-right: 29%;
            border: darkgray solid thin;
            padding: 0 0 0 0;
            position: absolute;
            left: 75px;
            top: 58px;
            width: 247px;
            /*background: #fff0f0;*/
        }
        li{
            list-style-type: none;
            padding-left: 8px;

        }
        .inp{
            position: relative;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            background-clip: padding-box;
            margin: 180px auto;
            width: 350px;
            height: 180px;
            padding: 35px 75px 15px 75px;
            background: #fff;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #cac6c6;
        }
        .selected{
            background: #f0f0f0;
        }
        .unselect{
            background: #fff0f0;

        }

    </style>
</head>
<body>
<div class="inp">
    <input id="inp" type="text"><button style="background: DodgerBlue;width: 28%">点击搜索</button><br>
</div>

<script>
    var sData = ["java","javascript","js","php","python","c++"];
    var keyc = 0;
    var liIndex = -1;
    var setIntValue = '';

    var div = document.getElementsByTagName('div')[0];
    var inputT = document.getElementById("inp");
    var ul = '';

    inputT.addEventListener('keydown',function (e) {

        keyc = e.keyCode;

        if(ul != ''){
            for(let li of ul.children){
            li.removeAttribute('class');
            }
        }

        if(inputT.value != ""){
            if(keyc === 13){
                inputT.value = setIntValue;
                ul.parentNode.removeChild(ul);
            }

            if(keyc === 40){
                liIndex += 1;
                if(liIndex > ul.children.length-1){
                    liIndex = 0;
                }
                console.log(ul.children[liIndex]);
                ul.children[liIndex].setAttribute('class','selected');
                setIntValue = ul.children[liIndex].innerText;
            }else if(keyc === 38){
                liIndex -= 1;
                if(liIndex < 0){
                liIndex = ul.children.length-1;
                }
                console.log(ul.children[liIndex]);
                ul.children[liIndex].setAttribute('class','selected');
                setIntValue = ul.children[liIndex].innerText;
            }
        }

    });

    inputT.addEventListener('input', function(){
        //判断如果没有ul，就执行添加
        if(div.getElementsByTagName('ul').length === 0){
            ul = document.createElement('ul');
            ul.setAttribute('id','ul');
            div.appendChild(ul);
            //事件委托，为ul下面的子节点提供委托事件，e.target指向被点击的节点
            ul.addEventListener('click',function(e){
                var tar = e.target;
                inputT.value = tar.innerText;
        })
        }

        var re = new RegExp("^" + inputT.value + "");
        liIndex = -1;  //每次input更新，就重置指针

        //清空ul
        while(ul.firstChild){
            ul.removeChild(ul.firstChild);
        }

        for(let i = 0; i < sData.length; i++){
            if(inputT.value != '' && re.test(sData[i])){
                let li = document.createElement("li");
                li.innerText = sData[i];//4.
                ul.appendChild(li);

            }
        }
    })
</script>
</body>
</html>