前端输入框联想提示实现-优快云博客

本文介绍了一种基于JavaScript的前端实现方案，用于输入框的关键词联想提示功能。通过监听输入框的keyup事件，根据用户输入的部分关键词，在下方实时显示匹配的完整关键词列表，提升用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 200px;
            margin: 0;
            padding: 0;
        }

        .box input{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

    <div class="box" id="box">
        <input type="input" id="inp">
    </div>

    <script src="common.js"></script>
    <script>
        var keyWords = ["小杨才是最帅的", "小刘才是最棒的", "小薛才是最好的", "小样也是不错的", "传智播客是最好的", "传说在传值有个很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"]

        my$('inp').onkeyup = function(){
            var text = this.value
            var tempArr = []

            if(my$('dv')){
                my$('box').removeChild(my$('dv'));
            }

            for(var i = 0 ; i < keyWords.length ; i++){
//                console.log(keyWords[i].indexOf(text) == 0)
                if(keyWords[i].indexOf(text) == 0){
                    tempArr.push(keyWords[i])
                }
            }
            console.log(tempArr)

            if(this.value.length == 0 || tempArr.length == 0){
                if(my$('dv')){
                    my$('box').removeChild(my$('dv'));
                }
                return
            }

            var dvObj  = document.createElement('div')
            console.log(dvObj)
            my$('box').appendChild(dvObj)
            dvObj.id = 'dv';
            dvObj.style.width = '200px';
            dvObj.style.height = '200px';
            dvObj.style.border = '1px solid #e60012;'

            for(var i = 0; i< tempArr.length; i++){
                var pObj = document.createElement('p')
                dvObj.appendChild(pObj)
                setInnerText(pObj, tempArr[i])
                pObj.style.margin = 0;
                pObj.style.padding = 0;
                pObj.style.cursor = 'pointer'
                pObj.style.marginTop = '5px';
                pObj.style.marginLeft = '5px'
                pObj.style.fontSize = '12px'
                //鼠标进入
                pObj.onmouseover = function(){
                    this.style.backgroundColor = 'yellow'
                }
                pObj.onmouseout = function(){
                    this.style.backgroundColor = 'white'
                }
            }
        }

        function setInnerText(element, text){
            if(typeof  element.textContent == "undefined"){
                element.innerText = text
            }else{
                element.textContent = text
            }
        }
    </script>
</body>
</html>