頁面版文本框智能提示JS代碼
2024-05-06 14:12:50
供稿：網友
于是這code便誕生了，如下：
代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標題頁</title>
<script type="text/javascript" language="javascript">
var currentIndex=-1;//保存提示框中選擇的索引
var sumSearchCount=0;//保存提示框中數據數量
var tempValue="";//保存當前輸入的要搜索的內容
var objTxt="";//保存文本框對象
var top=0;//提示框的top
var left=0;//提示框的left
var width=0;//提示框的width
var values = new Array();//保存下拉列表的值
var texts = new Array();//保存下拉列表的顯示內容
var tempDiv=new Array();//保存提示框中索引對應的values索引
//獲取下拉列表的值和顯示內容
function getSelectValues(ddl){
ddlvalue = document.getElementById("DropDownList1");
for(var i=0;i<ddlvalue.length;i++){
values[i]=ddlvalue.options[i].value;
texts[i]=ddlvalue.options[i].text;
}
}
var oInterval = "";//保存自動計時對象
function fnStartInterval(txt_id){
getSelectValues("DropDownList1");
objTxt=txt_id;//獲取輸入文本框對象
top = getLength("offsetTop")+objTxt.offsetHeight;
left= getLength("offsetLeft");
width=objTxt.offsetWidth;
oInterval = window.setInterval("beginSearch()",2000);//啟用計時
}
//獲取對應屬性的長度
function getLength(attribute)
{
var offset = 0;
var txt_input = document.getElementById("txtSearch");
while (item)
{
offset += txt_input[attribute];
txt_input = txt_input.offsetParent;
}
return offset;
}
//停止計時
function fnStopInterval()
{
window.clearInterval(oInterval);
}
//自動完成提示
function beginSearch(){
if(objTxt.value.length>0 && tempValue!=objTxt.value)
{
sumSearchCount=0;
tempValue=objTxt.value;
var div_show = document.getElementById("divMsg");
div_show.style.top=top+"px";
div_show.style.display="block";
div_show.style.left=left+"px";
div_show.style.width=width+"px";
div_show.innerHTML="";
var leng = texts.length;
var txt_value = objTxt.value;
var row="";
for(var i=0;i<leng;i++){
if(texts[i].indexOf(txt_value)!=-1){
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>";
tempDiv[sumSearchCount]=i;
sumSearchCount++;
}
}
div_show.innerHTML=row;
}
else if(objTxt.value.length==0 || objTxt.value == null)
{
var div_msg = document.getElementById("divMsg");
div_msg.style.display="none";
div_msg.innerHTML="";
}
}
//提示內容單擊保存到文本框中
function span_click(sp)
{
clear();
objTxt.value=sp.innerHTML;
document.getElementById("DropDownList1").options[sp.id.substring(sp.id.indexOf('_')+1,sp.id.length)].selected="selected";
