web前端之自动提示的文本框

首先说一下思路,通过给文本框绑定键盘输入事件,来给div下的ul元素添加子元素,实际的应用情况应该为输入数据
ajax到服务器返回输入信息的模糊查询(根据热度之类的总之是动态数据),返回数据并添加到ul下作为子元素,这里直接用了一个aColors作为库用来匹配输入项
理一理整个程序的脉络
监听键盘输入事件,初始化全局变量,如果输入的信息和aColors单词表中的单词从第一个字母开始匹配那么把这个单词压入数组中,如果有匹配结果那么先清除原有的提示,
通过clearColors函数,循环ul的子元素并删除,然后将div的class设置为hide不可见,然后再将匹配到的结果从数组中逐个取出并将其放入li元素中作为text节点,并绑定鼠标
移入和移出事件以及点击事件,点击事件为将input的值设置为li的文本节点的值,这里有个小细节,获取文本节点使用this.firstChild.nodeValue而不是this.nodeValue因为我们
点击事件绑定的是li元素节点,它本身的nodeValue值是一个null值nodeValue属性是用来获取文本节点的值的(注意:html标签之间的空格会被解释称文本节点
回过来如果匹配不到就清除提示框,如果无输入比如一些功能键那么同样清除提示框
附上代码:



	
	自动提示的文本框
	
	


	
Color:

你可能感兴趣的:(----------前端开发)