??? <!doctype html>
??? <html>
??? <style>
??? body {
??????? margin-left: 0px;
??????? margin-top: 0px;
??????? margin-right: 0px;
??????? margin-bottom: 0px;
??? }
??? .auto_hidden {
??????? width:204px;border-top: 1px solid #333;
??????? border-bottom: 1px solid #333;
??????? border-left: 1px solid #333;
??????? border-right: 1px solid #333;
??????? position:absolute;
??????? display:none;
??? }
??? .auto_show {
??????? width:204px;
??????? border-top: 1px solid #333;
??????? border-bottom: 1px solid #333;
??????? border-left: 1px solid #333;
??????? border-right: 1px solid #333;
??????? position:absolute;
??????? z-index:9999; /* 设置对象的层叠顺序 */
??????? display:block;
??? }
??? .auto_onmouseover{
??????? color:#ffffff;
??????? background-color:highlight;
??????? width:100%;
??? }
??? .auto_onmouseout{
??????? color:#000000;
??????? width:100%;
??????? background-color:#ffffff;
??? }
??? </style>
??? <script language="javascript">
????var $ = function (id) {
??????? return "string" == typeof id ? document.getElementById(id) : id;
??? }
??? var Bind = function(object, fun) {
??????? return function() {
??????????? return fun.apply(object, arguments);
??????? }
??? }
??? function AutoComplete(obj,autoObj,arr){
??????? this.obj=$(obj);??????? //输入框
??????? this.autoObj=$(autoObj);//DIV的根节点
??????? this.value_arr=arr;??????? //不要包含重复值
??????? this.index=-1;????????? //当前选中的DIV的索引
??????? this.search_value="";?? //保存当前搜索的字符
??? }
??? AutoComplete.prototype={
??????? //初始化DIV的位置
??????? init: function(){
??????????? this.autoObj.style.left = this.obj.offsetLeft + "px";
??????????? this.autoObj.style.top? = this.obj.offsetTop + this.obj.offsetHeight + "px";
??????????? this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px??
??????? },
??????? //删除自动完成需要的所有DIV
??????? deleteDIV: function(){
??????????? while(this.autoObj.hasChildNodes()){
??????????????? this.autoObj.removeChild(this.autoObj.firstChild);
??????????? }
??????????? this.autoObj.className="auto_hidden";
??????? },
??????? //设置值
??????? setValue: function(_this){
??????????? return function(){
??????????????? _this.obj.value=this.seq;
??????????????? _this.autoObj.className="auto_hidden";
??????????? }??????
??????? },
??????? //模拟鼠标移动至DIV时，DIV高亮
??????? autoOnmouseover: function(_this,_div_index){
??????????? return function(){
??????????????? _this.index=_div_index;
??????????????? var length = _this.autoObj.children.length;
??????????????? for(var j=0;j<length;j++){
??????????????????? if(j!=_this.index ){??????
??????????????????????? _this.autoObj.childNodes[j].className='auto_onmouseout';
??????????????????? }else{
??????????????????????? _this.autoObj.childNodes[j].className='auto_onmouseover';
??????????????????? }
??????????????? }
??????????? }
??????? },
??????? //更改classname
??????? changeClassname: function(length){
??????????? for(var i=0;i<length;i++){
??????????????? if(i!=this.index ){??????
??????????????????? this.autoObj.childNodes[i].className='auto_onmouseout';
??????????????? }else{
??????????????????? this.autoObj.childNodes[i].className='auto_onmouseover';
??????????????????? this.obj.value=this.autoObj.childNodes[i].seq;
??????????????? }
??????????? }
??????? }
??????? ,
??????? //响应键盘
??????? pressKey: function(event){
??????????? var length = this.autoObj.children.length;
??????????? //光标键"↓"
??????????? if(event.keyCode==40){
??????????????? ++this.index;
??????????????? if(this.index>length){
??????????????????? this.index=0;
??????????????? }else if(this.index==length){
输入框自动填充成效 js
日期：2014-05-16 浏览次数：20369 次
输入框自动填充效果 js
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
