JavaScript中关键字搜索自能提示

 //计时器隔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);
                };
            };
        };

  

时间: 2024-12-07 20:52:21

JavaScript中关键字搜索自能提示的相关文章

在Winfrom下实现类似百度、Google搜索自能提示功能

前记:数据源来自页面的一个ComboBox的数据源List<Contract>集合 页面放置一个TextBox(搜索框).ListBox(显示搜索出来的数据),ListBox位置位于TextBox正下方,初始化隐藏. TextBox--->txtSearch  ListBox--->listBox1关于两个控件的事件,详见代码: [c-sharp] view plain copy #region  自能提示 Point pList = new Point(); private vo

随笔,记录JavaScript中的面试题

我不知道我的js水平怎么样,但是今天有点受打击,看到很多题有坑.看了一些面试题,我记录下今天遇到的坑吧. 问题1:作用域 考虑以下代码,输出结果是什么? (function() { var a = b = 5; })(); console.log(b); 答案是5. 这道题我知道,陷阱在于var a = b =5,如果是声明,应该是var a,b =5;这样a,b的值都为5,由于a,b的都在函数作用域里面,所以外部是输出不出来的,则会显示b = undefined.而这里,由于js的特性,所以这

Javascript中常见的10大面试题及答案

在IT界中,JavaScript开发人员的需求量一直居高不下.如果你的能力能够胜任这一角色,那么你有很多机会换一家公司,并提高薪水.但在你被一家公司聘用之前,你必须展示你的技能,以通过面试环节.在本文中,我将向您展示10个 JavaScript 技能典型问题以及其相关解决方案,来面试前端工程师.它们很有意思! 问题1: 作用域(Scope) 考虑以下代码: (function() { var a = b = 5; })(); console.log(b); 控制台(console)会打印出什么?

Javascript中this关键字详解

原文出处:http://www.cnblogs.com/justany/archive/2012/11/01/the_keyword_this_in_javascript.html Quiz 请看下面的代码,最后alert出来的是什么呢? 1 var name = "Bob"; 2 var nameObj ={ 3 name : "Tom", 4 showName : function(){ 5 alert(this.name); 6 }, 7 waitShowNa

Javascript中的关键字和保留字

ECMA-262中描述了一组具有特定用途的关键字,可用于表示控制语句的开始或结束,或者用于执行特定操作等.规定:关键字属于语言保留,不可以用于标示符. ECMAScript的全部关键字(*为第五版新增): break do instanceof typeof case else new var catch finally return void continue for switch while debugger*   function this with default if throw de

JavaScript中的this关键字

"this"关键字是JavaScript中广泛应用的一种特性,但它经常也是这门语言中最容易混淆和误解的特性."this"的实际意义是什么?它是如何求值的? 本文试图以清晰的方式澄清和解释这问题的答案. 有过其他编程经验的人对"this"关键字并不陌生,大部分时候当通过构造函数实例化一个类的实例时,它指新创建的对象.例如,如果我有一个类Boat(),其拥有一个moveBoat()方法,当在moveBoat方法中引用"this"的

Javascript中实现不加new关键字的构造函数

一般而言,在Javascript中创建对象时需要使用关键字new,但是某些时候,开发者希望无论new关键字有没有被显式使用,构造函数都可以被正常调用,即构造函数同时还具备简单工厂的职能.Javascript的一个特性使得这样的实现变得可行:如果构造函数中返回了对象,无论有没有使用new关键字,最终返回的值都是函数return的值. 基于这点特性,本文介绍了四种实现方式,抛砖引玉,欢迎拍砖~ 1. 在构造函数中返回对象字面量 1 function Person(name) { 2 return {

JavaScript中this关键字的使用比较

JavaScript中this关键字的使用比较 this关键字在JavaScript中,用的不能说比较多,而是非常多.那么熟悉this关键字的各种用法则显得非常关键. this有时候就是我们经常说的上下文,这个东西的指代对象.它灵活多变,有时候你看它是对象,有时候是window宿主对象. 1.this指向宿主对象 function myWindow() { this.id = 1; // 等价于window.id = 1 console.log(this); // 这里的this就是window

JavaScript中var关键字的使用详解

作用 声明作用:如声明个变量. 语法 ? 1 var c = 1; 省略var 在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的. ? 1 2 3 4 5 6 7 8 <script type="text/javascript">   function Define() {     a = 2;   }   function Hello() {     alert(a);   } </script>