页面内有一个input输入框，实现在数组arr查询命中词并要求autocomplete效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
    margin: 0;
    padding: 0;
    box-sizing:border-box;

}
#div1{
    margin:200px auto;
    position: relative;
}

ul{
    list-style: none;
    margin: 0 auto;
    background-color: #ededed;
    color: #3b200c;
    width: 400px;
    border: none;
}

li{
    cursor: pointer;
}

input{
    display: block;
    margin: 0 auto;
    line-height: 40px;
    height: 40px;
    width: 400px;
    font-size: 20px;
    background-color: #ede387;
    border: none;
}

    </style>
</head>

<body>
    <div id="div1">
        <input type="text" id="input" placeholder="有autocomplete的输入框" />
        <ul id="ul">
        </ul>
    </div>
</body>
<script>
    var arr = ['a', 'apple', 'abandon', 'bilibili', 'beep', 'before', 'become', 'being', 'highmaintains', 'by', 'bye', 'banana']

    input.addEventListener('input', function (event) {

        var _value = event.target.value.trim()

        if (_value) {

            autoComplete(_value, arr)
        }

        else {

            ul.innerHTML = ''
        }

    })


    function autoComplete(str, arr) {

        var lis = []

        arr.forEach((word) => {

            if (word.startsWith(str)) {

                lis.push('<li>' + word + '</li>')
            }
        })

        ul.innerHTML = lis.join('')
    }

    function addToInput(li) {

        var _txt = li.innerText

        input.value = _txt
    }

    ul.addEventListener('click', function (event) {

        if (event.target.tagName.toLowerCase() === 'li') {

            addToInput(event.target)
        }
    })

</script>

</html>

页面内有一个input输入框，实现在数组arr查询命中词并要求autocomplete效果

推荐阅读更多精彩内容