码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript中关键字搜索自能提示

时间:2016-01-11 13:42:36      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

 //计时器隔0.5秒自动判断
        setInterval(function () {
            document.getElementById(‘txt‘).onchange();
        }, 500);

        if (true) {

        }
        onload = function () {

            //给搜索的文本框注册一个onchange事件,当文本框内容改变的时候根据文本框的的键去查找值
            document.getElementById(‘txt‘).onchange = function () {
                //当已经有一个dv的div层存在时 移除原dv
                if (document.getElementById(‘dv‘)) {
                    document.body.removeChild(document.getElementById(‘dv‘));
                }
                //当键中存在的话,创建一个div的层,并显示
                if (keyWords[this.value]) {
                    var dvObj = document.createElement(‘div‘);
                    dvObj.id = ‘dv‘;
                    dvObj.style.width = ‘300px‘;
                    dvObj.style.height = ‘200px‘;
                    dvObj.style.border = ‘1px solid red‘;
                    dvObj.style.position = ‘absolute‘;
                    dvObj.style.left = this.offsetLeft + ‘px‘;
                    dvObj.style.top = this.offsetHeight + this.offsetTop + ‘px‘;
                    //创建无序列表将键值对中的值加载到div中
                    var ulObj = document.createElement(‘ul‘);
                    ulObj.id = ‘ul‘;
                    ulObj.style.listStyleType = ‘none‘;
                    ulObj.style.margin = ‘0‘;
                    ulObj.style.padding = ‘0‘;
                    //加载
                    for (var i = 0; i < keyWords[this.value].length; i++) {
                        //创建li
                        var liObj = document.createElement(‘li‘);
                        liObj.innerText = keyWords[this.value][i];
                        liObj.style.marginTop = ‘5px‘;
                        liObj.style.cursor = ‘pointer‘;
                        ulObj.appendChild(liObj);
                        //鼠标移到指定li上的时候高亮显示,移走的时候恢复
                        liObj.onmouseover = function () {
                            this.style.backgroundColor = ‘red‘;
                        };
                        liObj.onmouseout = function () {
                            this.style.backgroundColor = ‘‘;
                        };
                    };
                    //在div中添加ul
                    dvObj.appendChild(ulObj);
                    //添加div
                    document.body.appendChild(dvObj);
                };
            };
        };

  

JavaScript中关键字搜索自能提示

标签:

原文地址:http://www.cnblogs.com/clcloveHuahua/p/5120816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!