js實現輸入框輸入的自動匹配功能

2021-08-30 12:08:34 字數 3808 閱讀 7279

完成輸入框輸入的自動匹配功能。

參考:這裡增加了和輸入拼音相對應的中文匹配。

如果能進一步完善,多謝指教。核心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...