完成輸入框輸入的自動匹配功能。
參考:這裡增加了和輸入拼音相對應的中文匹配。
如果能進一步完善,多謝指教。核心js**如下,demo見附件。
/*** 輸入框的自動匹配核心控制類
* @param $fixdom 存放用於匹配的值的div物件
*/function inputautofix($aconfig)
var _canfix=false; //能否匹配
var _instance=null;
var _key=null;
var _inputdom=aconfig.inputdom; //輸入框物件
var _index=0; //匹配容器中匹配值的索引
var _isnotout=false; //匹配值索引是否超出匹配值的長度
var _currentvalue=null; //當前輸入框中的值
_domch.style.visibility="hidden";
_domch.style.position="absolute";
_domch.style.zindex="999";
_domch.style.overflowy="auto";
_domch.style.overflowx="hidden";
_domch.style.height="50"; //初始化為50
this.beginhandleauto=beginhandleauto;
this.directionkey=directionkey; // 針對匹配結果進行鍵盤操作的事件定義
this.domouseover=domouseover; //匹配值的onmouseover事件時的樣式
this.domouseout=domouseout; //匹配值的onmouseout事件時的樣式
this.doonclick=doonclick; //匹配值的onclick事件定義
this.item=item; //儲存預先準備匹配的值
this.display=display; //找到匹配值後顯示存放匹配值的容器
this.setinstance=setinstance; //設定例項
function setinstance($instancename,$aconfiginstance)
/*** 開始匹配
* @param $inputvalue
* @param $event
*/function beginhandleauto($inputvalue)
return;
}var isen=false;
var regdirty=/^(\/|\?|\,)|\\/; //非法字元輸入
if(regdirty.test(_currentvalue))
var regchar=/^([a-za-z])+$/i; //英文輸入的匹配
var reg=new regexp("^"+_currentvalue+"","i"); //從開始位置進行匹配,忽略大小寫
_canfix=false;
// _isnotout=true;
_sb=;
_domch.innerhtml="";
//當前輸入的是英文
if(regchar.test(_currentvalue))
//對輸入的值進行匹配
for(var i=0;i<_msgch.length;i++)}}
}else}}
}//匹配後顯示匹配容器
trycatch(e)
//對匹配容器中的匹配值進行特殊的樣式處理
if(_canfix)else}};
/*** 把和輸入的值匹配的匹配值載入到匹配容器中並顯示
* @param $value 和輸入的值相匹配的匹配容器中的匹配值
*/if($value==null)
var fixvalue=$value;
_sb.push(fixvalue);
var divdom=document.createelement("div");
//對匹配的值進行滑鼠事件的繫結,主要是改變樣式
divdom.οnmοuseοver=function()
divdom.οnmοuseοut=function();
divdom.οnclick=function();
//如果匹配,對輸入框中的值進行加粗處理
var reg=new regexp("("+_currentvalue+")","i");
divdom.style.lineheight="140%";
divdom.classname="mouseout";
if(_currentvalue)
divdom.style.fontfamily="宋體";
};/**
* 針對匹配結果進行鍵盤操作的事件定義 :
* 1、在匹配結果中向上移動游標
* 2、在匹配結果中向下移動游標
* 3、對合適的匹配結果進行enter的操作
* 注意: 各個匹配結果的索引的變化
*/function directionkey()
if(key==40 && _isnotout)else
trycatch(e)
}if(key==38 && _isnotout)else
trycatch(e)
}if(key==13)
}if(!_isnotout)
};/**
* 對匹配值所在的dom進行onmousever的事件樣式處理
* @param $obj 匹配值所在的dom
*/function domouseover($obj)else
_index=0;
if(dom.tagname=="div")else
};/**
* 匹配值的onmouseout事件時的樣式
* @param $obj
*/function domouseout($obj)else
};/**
* 對匹配值的進行選擇的onclick事件
* @param $msg 匹配容器中和輸入值相匹配的值
*/function doonclick($msg)
_inputdom.value=v;
//選定匹配值後隱藏顯示匹配值的容器
_domch.style.visibility="hidden";
};//隱藏下拉面板
this.hidesel=hidesel;
function hidesel()
}/**
* 儲存用於匹配的值
* 如果值有多個,用,分隔
* @param $msg 用於匹配的值
* @param $tag 值型別的標記
*/function item($msg,$tag)if(msgen!=null && msgen.length>0)
};this.dohide=dohide;
function dohide()
autofix.hidesel();
}/**
* 開始匹配
* @param $currentvalue
*/this.beginrender=beginrender;
function beginrender($currentvalue)
//載入css檔案
function __loadcss($css) }
var aufix=new autofix();
JS輸入框校驗
想做姓名輸入的js判斷是否是中文,但是網上找的很多是源於一篇文章的,判斷中文的正則式不對,後來找到乙個可以準確判斷了,但是是監測裡面有中文的就行,跟我想要的只能輸入中文的意思相左,所以又找了下面的 js 控制文字框只能輸入數字 input nkeyup value value.replace 0 9...
Js驗證輸入框
validate.js html頁面使用情況 驗證字段是否唯一 欄位的唯一性校驗 validtype unique findvalidationmarkernumber.do add id true,輸入值已存在 第乙個引數 請求的url 第二個引數 add update 新增為add,修改為upd...
js限制輸入框只能輸入數字
分享下js限制輸入框中只能輸入數字的方法,包括整數與小數,分享幾個例子,有需要的朋友參考下。1.使用正規表示式限制輸入框只能輸入數字 1 input type text onkeyup this.value this.value.replace d g,onafterpaste this.value...