搜索框案例

html+css

<div id="box">
    <input type="text" id="txt" value="">
    <input type="button" id="btn" value="搜索">
</div>

    <style>
        #box {
            width: 355px;
            margin: 200px auto;
        }

        #txt {
            width: 300px;
            /*margin-left: 60px;*/
        }

        #btn {
            font-size: 12px;
            cursor: pointer;
            background-color: skyblue;
        }

        #pObjs {
            cursor: pointer;
            margin: 5px 0 0 5px;
            padding: 0;
            font-size: 13px;
            color: darkgrey;
        }
    </style>

<script>
    //关键词
    var keyWords = ["你好","你好啊","我好","你我好","大家都好"];
    //获取文本框注册键盘抬起事件
    my$("txt").onkeyup = function () {
        //每一次键盘抬起都得判断页面中是否有新建的div
        if (my$("dv")) {
            my$("box").removeChild(my$("dv"));
        }
        //获取文本框输入的内容
        var text = this.value;
        //创建临时数组，存储文本框输入内容与关键词对应上的内容
        var tempArr = [];
        //把文本框输入的内容和数组中的数据对比
        for (var i = 0; i < keyWords.length; i++) {
        	//如果输入的内容与数组中数据相符合则将符合的数据添加至临时数组中
            if (keyWords[i].indexOf(text) == 0) {
                tempArr.push(keyWords[i]);
            }
        }
        //如果文本框是空的，临时数组是空的，不用创建div
        if (this.value.length == 0 || tempArr.length == 0) {
            //如果页面里有新的div则删除
            if (my$("dv")) {
                my$("box").removeChild(my$("dv"));
            }
            //函数里遇到return，后面代码不执行
            return;
        }

        //创建div，把div加入到id为box的div中
        var dvObj = document.createElement("div");
        my$("box").appendChild(dvObj);
        //为新的dv设置样式
        dvObj.id = "dv";
        dvObj.style.width = "302px";
        dvObj.style.border = "1px solid skyblue";
        //遍历循环临时数组，创建对应的p标签
        for (var i = 0; i < tempArr.length; i++) {
            //创建p标签
            var pObj = document.createElement("p");
            //把p加到id为dv的div中
            dvObj.appendChild(pObj);
            //在p里添加内容
            setInnerText(pObj, tempArr[i]);
            pObj.id = "pObjs";
            //鼠标进入提示框样式
            pObj.onmouseover = function () {
                this.style.backgroundColor = "skyblue";
            };
            //鼠标离开提示框样式
            pObj.onmouseout = function () {
                this.style.backgroundColor = "";
            };
        }
    };
</script>

结果