したがって、次のようなコードが生まれました: コードをコピーします コードは次のとおりです: 无标题页 <br>var currentIndex=-1;//保存提示框中选择的索引 <br>var sumSearchCount=0;//保存提示框中数据数量 <br>var tempValue="";//保存当前输入的要搜索的内容 <br>var objTxt="";//保存文本框对象 <br>var top=0;//提示框的top <br>var left=0;//提示框的left <br>var width=0;//提示框的width <br>var values = new Array();//保存下拉列表的值 <br>var texts = new Array();//保存下拉列表的显示内容 <br>var tempDiv=new Array();//保存提示框中索引对应的values索引 <br>//获取下拉列表的值和显示内容 <br>function getSelectValues(ddl){ <br>ddlvalue = document.getElementById("DropDownList1"); <br>for(var i=0;i<ddlvalue.length;i++){ <BR>values[i]=ddlvalue.options[i].value; <BR>texts[i]=ddlvalue.options[i].text; <BR>} <BR>} <BR>var oInterval = "";//保存自动计时对象 <BR>function fnStartInterval(txt_id){ <BR>getSelectValues("DropDownList1"); <BR>objTxt=txt_id;//获取输入文本框对象 <BR>top = getLength("offsetTop")+objTxt.offsetHeight; <BR>left= getLength("offsetLeft"); <BR>width=objTxt.offsetWidth; <BR>oInterval = window.setInterval("beginSearch()",2000);//启用计时 <BR>} <BR>//获取对应属性的长度 <BR>function getLength(attribute) <BR>{ <BR>var offset = 0; <BR>var txt_input = document.getElementById("txtSearch"); <BR>while (item) <BR>{ <BR>offset += txt_input[attribute]; <BR>txt_input = txt_input.offsetParent; <BR>} <BR>return offset; <BR>} <BR>//停止计时 <BR>function fnStopInterval() <BR>{ <BR>window.clearInterval(oInterval); <BR>} <BR>//自动完成提示 <BR>function beginSearch(){ <BR>if(objTxt.value.length>0 && tempValue!=objTxt.value) <br>{ <br>sumSearchCount=0; <br>tempValue=objTxt.value; <br>var div_show = document.getElementById("divMsg"); <br>div_show.style.top=top+"px"; <br>div_show.style.display="block"; <br>div_show.style.left=left+"px"; <br>div_show.style.width=width+"px"; <br>div_show.innerHTML=""; <br>var leng = texts.length; <br>var txt_value = objTxt.value; <br>var row=""; <br>for(var i=0;i<leng;i++){ <BR>if(texts[i].indexOf(txt_value)!=-1){ <BR>row = row + "<div style=\"font-size:14px; display:block; width:100%\" id='divsearch_"+i+"' onmouseover=\"this.style.backgroundColor='#3366CC';currentIndex="+i+";\" onmouseout=\"this.style.backgroundColor='';currentIndex=-1;\" onclick=\"span_click(this)\" >"+texts[i]+"</div>"; <br>tempDiv[sumSearchCount]=i; <br>sumSearchCount ; <br>} <br>} <br>div_show.innerHTML=row; <br>} <br>else if(objTxt.value.length ==0 || objTxt.value == null) <br>{ <br>var div_msg = document.getElementById("divMsg"); <br>div_msg.style.display="none"; =""; <br>} <br>} <br>// クリックしてプロンプトの内容をテキスト ボックスに保存します。 <br>function span_click(sp) <br>{ <br>clear(); . value=sp.innerHTML; <br>document.getElementById("DropDownList1").options[sp.id.substring(sp.id.indexOf('_') 1,sp.id.length)].selected= selected "; <br>} <br>//クエリを停止し、プロンプトを閉じます <br>function closeSearch() <br>{ <br>var tbl = document.activeElement.parentElement; <br>if(tbl && tbl.id ! ="divMsg")//上下キーを使用した後にプロンプトの内容が失われるのを防ぎます <br>{ <br>clear(); <br>document.getElementById("divMsg").innerHTML=""; <br>} <br> else if(currentIndex==-1) <br>{ <br>clear(); <br>document.getElementById("divMsg").innerHTML=""; >} <br>// プロンプトをクリア<br>function clear() <br>{ <br>fnStopInterval(); <br>tempValue=""; "divMsg").style.display = none 🎜>if(divContent && divContent.style.display=="block") <br>{ <br>if (event.keyCode == 38 || event.keyCode == 40 || イベント.keyCode == 13) <br>{ <br>if(currentIndex!=-1) document.getElementById("divsearch_" tempDiv[currentIndex]).style.backgroundColor=""; .keyCode == 38 && currentIndex > 0 ) <br>{ <br>currentIndex--; <br>document.getElementById("divsearch_" tempDiv[currentIndex]).style.backgroundColor="#3366CC"; } <br>else if (event.keyCode == 40 && currentIndex < sumSearchCount-1) <BR>{ <BR>currentIndex ; <BR>document.getElementById("divsearch_" tempDiv[currentIndex]).style.backgroundColor= "#3366CC"; <BR>} <BR>else if (event.keyCode == 13) <BR>{ <BR>if(currentIndex > -1) <br>{ <br>var divpart = document.getElementById ("divsearch_" tempDiv[currentIndex]); <br>objTxt.value=divpart.innerHTML; <br>document.getElementById("DropDownList1").options[tempDiv[currentIndex]].selected="selected"; <br>} <br>} <br>} <br><br> <br> <form id="form1" runat= "server"> <br><div> <br><input type="text" id="txtSearch" autocomplete="off" onkeydown="changeSelect()" onfocus="fnStartInterval(this)" onblur= "closeSearch()" runat="server" /> <br><asp:DropDownList ID="DropDownList1" runat="server" DataTextField="slr_realname" DataValueField="systemloginrecord_id " DataSourceID="ObjectDataSource1" width="130px "> <br></asp:DropDownList><asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetRecordDS" <BR>TypeName="TestDAL" "></asp:ObjectDataSource> <br></div> <br><div style="display:none; text-align:left; border:solid; 1px;" id="divMsg"> <br></div> <br></form><BR></body> <br></html> <br><br> <br><input type="text" id ="txtSearch" autocomplete="off"。 。 。ここでは、テキスト ボックスの入力レコード プロンプト機能をブロックするために autocomplete 属性が追加されています。この機能は非常に優れていますが、ここで障害になります。笑 <br> 以前はブログを書く習慣がなかったので、あまり使わなかったものは使った後に忘れてしまうことが多かったです。それは後で整理されます。</div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
