简单仿百度自动搜索框

body中

<body>
请输入搜索内容:<input type="text" name="name" value="" id="txt" style="border:1px solid gray;margin:0;padding:0; 200px;" />

</body>

View Code

<script>中

 <script type="text/javascript">
        window.onload = function () {
            var keyWords = {
                "aaaa": ["a开头", "aa开头", "aaa开头", "aaaa开头"],
                "bbb": ["b开头", "bb开头", "bbb开头", "bbbb开头"],
                "aa33": ["杨利伟", "杨振宇", "杨过"],
                "bbbb111": ["杨忠科", "杨忠学", "杨忠爱国"]
            };
            //onchange事件--这个事件不太合适
            //加一个计时器
            //===js高级中 会有一个全新方法 做这个题
            setInterval(function () {
                document.getElementById('txt').onchange();
            }, 100);
            document.getElementById('txt').onchange = function () {
                //获取文本框的内容
                var content = this.value;
                //判断这个内容 是否在键值对中
                for (var key in keyWords) {
                    if (document.getElementById('dv')) {
                        document.body.removeChild(document.getElementById('dv'));
                    }
                    //如果键值对中有这个key
                    if (keyWords[content]) {
                        //如果文本框的内容在字典中存在则创建层,创建p标签,p标签添加到层中,层添加到body中
                        //如果body中有个层就删除了
                        var dvObj = document.createElement('div');
                        dvObj.id = 'dv';
                        dvObj.style.width = '200px';
                        //层的高度不用设置
                        //dvObj.style.height = '50px';
                        dvObj.style.border = '1px solid green';
                        dvObj.style.position = 'absolute';
                        dvObj.style.left = this.offsetLeft + 'px';
                        dvObj.style.top = this.offsetTop + this.offsetHeight + 'px';
                        //根据value创建标签添加到层中
                        for (var i = 0; i < keyWords[content].length; i++) {
                            var pObj = document.createElement('p'); //创建p标签
                            pObj.innerHTML = keyWords[content][i];
                            pObj.style.margin = '0';
                            pObj.style.cursor = 'pointer';
                            pObj.onmouseover = function () {
                                this.style.backgroundColor = 'yellow';
                            };
                            pObj.onmouseout = function () {
                                this.style.backgroundColor = '';
                            };
                            dvObj.appendChild(pObj); //p添加到层中
                        }
                        //层添加到body中
                        document.body.appendChild(dvObj);
                    }
                }
            };

        };

    </script>

View Code

效果