<textarea cols="50" rows="15" name="code" class="c-sharp"><%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無標題頁</title> <mce:script type="text/javascript" language="javascript"><!-- var intIndex=0;arrList = new Array(); function test() { dearray("1111,222,222a,aaa,aa1,bb,b222,b3,323313,3213,32213,dsfsdddd"); smanPromptList(arrList,"inputer1"); smanPromptList(arrList,"inputer2"); smanPromptList(arrList,"inputer3") } function dearray(aa)//定義array { arrList = aa.split(','); } function getAbsoluteWidth(ob) { return ob.offsetWidth } function smanPromptList(arrList,objInputId){ var objouter=document.getElementById("__smanDisp") //顯示的DIV對象 var objInput = document.getElementById(objInputId); //文本框對象 var selectedIndex=-1; var intTmp; //循環用的:) if (objInput==null) {alert('smanPromptList初始化失敗:沒有找到"'+objInputId+'"文本框');return ;} //文本框失去焦點 objInput.οnblur=function(){ objouter.style.display='none'; } //文本框按鍵擡起 objInput.οnkeyup=checkKeyCode; //文本框得到焦點 objInput.οnfοcus=checkAndShow; function checkKeyCode(){ var ie = (document.all)? true:false if (ie){ var keyCode=event.keyCode if (keyCode==40||keyCode==38){ //下上 var isUp=false if(keyCode==40) isUp=true ; chageSelection(isUp) }else if (keyCode==13){//回車 outSelection(selectedIndex); }else{ checkAndShow() } }else{ checkAndShow() } divPosition() } function checkAndShow(){ var strInput = objInput.value if (strInput!=""){ divPosition(); selectedIndex=-1; objouter.innerHTML =""; for (intTmp=0;intTmp<arrList.length;intTmp++){ if (arrList[intTmp].substr(0, strInput.length)==strInput){ addOption(arrList[intTmp]); } } objouter.style.display=''; }else{ objouter.style.display='none'; } function addOption(value){ objouter.innerHTML +="<div οnmοuseοver=/"this.className='sman_selectedStyle'/" οnmοuseοut=/"this.className=''/" οnmοusedοwn=/"document.getElementById('"+objInputId+"').value='" + value + "'/">" + value + "</div>" } } function chageSelection(isUp){ if (objouter.style.display=='none'){ objouter.style.display=''; }else{ if (isUp) selectedIndex++ else selectedIndex-- } var maxIndex = objouter.children.length-1; if (selectedIndex<0){selectedIndex=0} if (selectedIndex>maxIndex) {selectedIndex=maxIndex} for (intTmp=0;intTmp<=maxIndex;intTmp++){ if (intTmp==selectedIndex){ objouter.children[intTmp].className="sman_selectedStyle"; }else{ objouter.children[intTmp].className=""; } } } function outSelection(Index){ objInput.value = objouter.children[Index].innerText; objouter.style.display='none'; } function divPosition(){ var clx,cly; clx=event.clientX; cly = event.clientY; objouter.style.top = cly+10; objouter.style.left = clx+20; objouter.style.width= getAbsoluteWidth(objInput) } } document.write("<div id='__smanDisp' style="position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;" mce_style="position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;" onbulr> </div>"); document.write("<mce:style><!-- .sman_selectedStyle{background-Color:#102681;color:#FFFFFF} --></mce:style><style mce_bogus="1">.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>"); // --></mce:script> </head> <body οnlοad="test()"> <form id="form1" runat="server"> <div> <table border="1" align="center" cellspacing="1" id="table1" style="BORDER-COLLAPSE: collapse" mce_style="BORDER-COLLAPSE: collapse" > <tr bgcolor="#99CCFF"> <td bgcolor="#CEE3FF">查詢1</td> <td bgcolor="#FFFFFF"><input type="text" id="inputer1" /></td> </tr> <tr bgcolor="#99CCFF"> <td bgcolor="#CEE3FF">查詢2</td> <td bgcolor="#FFFFFF"><input type="text" id="inputer2" /></td> </tr> <tr bgcolor="#99CCFF"> <td height="24" bgcolor="#CEE3FF">查詢3</td> <td height="24" bgcolor="#FFFFFF"><input type="text" id="inputer3" /></td> </tr> </table> </div> </form> </body> </html> </textarea>
搜索框中輸入文本自動提示候選項代碼(像google那樣的)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
快速搞懂.NET 5/.NET Core應用程序的發佈部署 快速搞懂.NET 5/.NET Core應用程序的發佈部署
Sam Xiao
2021-03-22 18:35:21
socket粘包處理
uperstar
2020-08-05 13:43:18
繼續學習 DLINQ和ADO.NET實體框架
鲁虾
2020-07-08 05:53:08
繼續學習 O/R Mapping
1. 業務實體層的設計方案選擇 1) 業務實體層的作用 一般的應用程序分層的結構如下: 可見,在分層的時候,我們會增加一個實體層,它的作用如下:
鲁虾
2020-07-08 05:53:07
實現IHttpHandler接口來控制文件下載權限
xyjchinese
2020-07-07 16:03:26
異步Ado.Net操作
xyjchinese
2020-07-07 15:24:11
關於強名稱的使用來防止DLL被非法調用
xyjchinese
2020-07-07 15:24:10
動態規劃法-01揹包問題
郗富琦
2020-07-07 12:09:11
回溯法-01揹包問題之二:順序執行模式
郗富琦
2020-07-07 12:09:11
WdatePicker的使用說明
yy910308
2020-07-06 19:06:14
圖片與二進制互轉
/// <summary> /// Image轉二進制 /// </summary> /// <param name="img">圖片</param> ///
LYQ_K
2020-07-06 17:11:37
關於wcf ria service 中複雜條件查詢的經驗小結
微恒软件
2020-07-06 13:25:19
編程4年後,寫上幾句心得吧,也算是對自己幾年的編碼過程的總結。
微恒软件
2020-07-06 13:25:18
堆棧溢出的預防方法
MCS—51系列單片機堆棧設置在片內RAM中,由於片內RAM資源有限,故堆棧區的範圍也是有限的,堆棧區留得太大,將減少其他的數據存放空間,留得太
微恒软件
2020-07-06 13:25:17