html css javascript asp 实现combobox　类google智能提示

最新推荐文章于 2021-07-01 05:01:35 发布

a385833253

最新推荐文章于 2021-07-01 05:01:35 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP 文章标签： javascript html css google asp xmlhttprequest

本文链接：https://blog.youkuaiyun.com/a385833253/article/details/6586100

ASP 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个可编辑的下拉菜单实现方案，并通过Ajax技术实现了输入时的智能搜索功能，能够从数据库中检索匹配项并实时更新建议列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

style.css

/* CSS Document */

body
{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
} !

#search_suggest
{
position:absolute;
background:#FFFFFF;
text-align:left;
border:1px #000000 solid;
} .　

.suggest_link_over
{
background-color:#e8f2fe;
padding:2px 6px;
} ..

.suggest_link
{
padding:2px 6px;
background-color:#FFFFFF;
} !

.none
{
display:none;
}

search.asp

<!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>
<title></title>
</head>
<body>
<%
key = request.QueryString("key")
if (key <> "") then
dim conn,rs,connstr,sqlcmd

set conn=Server.CreateObject("Adodb.connection")
connstr="PROVIDER=SQLOLEDB;data source=localhost;uid=ZBTEST;pwd=123456;database=ZBTEST;"
conn.open connstr

sqlcmd = "select top 10 id from number where id like '" & key & "%'"

Set rs=Server.CreateObject("Adodb.recordset")
rs.open sqlcmd,conn
while not rs.EOF

keyword = keyword & rs(0) & "|"
rs.movenext
wend
Response.write(keyword)

rs.close
set rs=nothing
set conn=nothing
end if
%>
</body>
</html>

untitled1.asp

<HTML>
　　<HEAD>
　　
　　<SCRIPT LANGUAGE="javascript">
　　function Body_Init(oSelect,oText)
　　{
　　var iLeft= oSelect.offsetLeft;
　　var iTop = oSelect.offsetTop;
　　var iWidth=oSelect.clientWidth;
　　var iHeight=oSelect.clientHeight;
　　oSelect.style.clip='rect(0,'+iWidth+','+iHeight+','+(iWidth-18)+')';
　　oText.style.width=iWidth;
　　oText.style.height=iHeight;
　　oText.style.top =iTop;
　　oText.style.left=iLeft;
　　}
　　function Combo_Select(oSelect,oText)
　　{
　　oText.value=oSelect.options[oSelect.selectedIndex].text;
　　
　　}
　　function Text_ChkKey(oSelect,oText)
　　{
　　if(event.keyCode==13)
　　{
　　 var nIndex=HasTheValue(oText.value,oSelect);
　　 if(nIndex !=-1 && nIndex !=oSelect.selectedIndex)
　　 {
　　 oSelect.selectedIndex=nIndex;
　　 }
　　}
　　}
　　function HasTheValue(name,oSelect)
　　{
　　if(oSelect.options.length<1)
　　 return -1;
　　var i=0;
　　for(i=0;i<oSelect.options.length;i++)
　　{
　　 if(oSelect.options[i].text==name)
　　 return i;
　　}
　　return -1;
　　}

<!--
//cache用于存储已经获取的数据

var cache=[];
function getlevel2(){

//如果当前二级分类没有被缓存，则从服务器端获取
if(!cache[document.forms.form1.pCombo.selectedindex]){
//建立跨浏览器的xmlhttprequest对象
var xmlhttp;
try{
   xmlhttp= new activexobject('msxml2.xmlhttp');
}catch(e){
   try{
    xmlhttp= new activexobject('microsoft.xmlhttp');
   }catch(e){
    try{
     xmlhttp= new xmlhttprequest();
    }catch(e){}
   }
}
//创建请求，并使用escape对username编码，以避免乱码
xmlhttp.open("get","select.asp?id="+document.forms.form1.pText.value);

xmlhttp.onreadystatechange=function(){
   if(xmlhttp.readystate==4){
    if(xmlhttp.status==200){
     cache[document.forms.form1.pCombo.selectedindex]=eval("("+unescape(xmlhttp.responsetext)+")");
     //获取成功后重新调用getlevel2，www.111cn.net将数据填充到下拉框，如果直接在这里写会造成代码重复
     getlevel2();
    }else{
     alert("网络失败。");
    }
   }
}
xmlhttp.send(null);
//必须在这里返回，等待回调
return;
}
//此时已经确保缓存不为空
document.forms.form1.pCombo.length=1;
var _arr=cache[document.forms.form1.pCombo.selectedindex];
for(var i=0;i<_arr.length-1;i+=2){
with(document.forms.form1.pCombo){
   options[options.length]=new option(_arr[i],_arr[i+1]);

}
}
}
//-->

var xmlHttp = createXmlHttpRequest();

return xmlhttp;
}

function change_key()
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
var str = document.getElementById("pText").value;

xmlHttp.open("get","search.asp?key=" + str,true);
xmlHttp.onReadyStateChange = handSearchRequest;
xmlHttp.send(null);
}
}

function handSearchRequest()
{
if (xmlHttp.readyState == 4)
{
var div = document.getElementById("search_suggest");
div.innerHTML = "";
var str = xmlHttp.responseText.split("|");

document.getElementById("select").options.length=0;

for (var i=0; i<str.length; i++)
{
if(i!=0&&i!=str.length-1){
document.getElementById("select").options.add(new Option(str[i],str[i]));
}

var suggest = '<div onmouseover="javascript:suggestOver(this);"';
suggest += 'onmouseout="javascript:suggestOut(this);"';
suggest += 'onclick="javascript:setSearch(this.innerHTML);"';
suggest += 'class="suggest_link">'+ str[i] + '</div>';
div.innerHTML += suggest;
}
}
}

function setSearch(div_value)
{
document.getElementById("pText").value = div_value;
document.getElementById("search_suggest").className = 'none';
}
function suggestOver(div_value)
{
div_value.className = 'suggest_link_over';
}

function suggestOut(div_value)
{
div_value.className = 'suggest_link';
}

</script>
<link rel="stylesheet" type="text/css" href="../divAjax/style.css">
　　</HEAD>
　　<BODY onLoad="javascript:Body_Init(pCombo,pText);">
<table width=50% width=50% align="center" valign="middle">
　　<tr><td>
　　 <SELECT STYLE="position:absolute;left:0;top:0;width:100px;" ONCHANGE="Combo_Select(this,pText)" NAME="pCombo" id="select" >
　　
　　 </SELECT>
　　 <INPUT STYLE="position:absolute;" onKeyPress="Text_ChkKey(pCombo,this)" TYPE="TEXT" NAME="pText" id="textarea" autocomplete="off" onkeyup="change_key()">
　　 </td></tr>
　　 </table>

实现可编辑下拉select菜单　　并可根据输入指智能从数据库搜索匹配关键字的值在菜单中提示　　需注意匹配值过多会造成浏览器未响应　　此代码匹配前１０个值