仿百度下拉提示框代码

置顶天人合一剑

于 2014-04-18 10:22:12 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签：百度提示框下拉提示框输入联想百度输入提示框输入提示框

本文链接：https://blog.csdn.net/yefanghua/article/details/23998601

仿百度搜索下拉提示框代码

数据库中以like方式查询数据库

1.下拉框样式，可根据需要进行相应的修改

.message_hover{

background-color:#475c9d;

padding:2px 6px 2px 6px;

height:25px;

cursor:pointer;

color:#ffffff;

}

.message{

background-color:#ffffff;

padding:2px 6px 2px 6px;

height:25px;

cursor:default;

}

#showMessage{

position:absolute;

border:1px solid #000000;

background-color:#ffffff;

width:188px;

*width:190px;

text-align:left;

display:none;

}

</style>

2. js方法这里只需要把<%=txtAccount.ClientID %>改成你的输入框就行了，GetSalerID.aspx为数据请求页面，也可以是一般处理程序。

var xmlHttp;

function sendRequest(event) {

varkeyCode;

vare = event ? event : (window.event ? window.event : null);

keyCode = e.keyCode || e.which ||e.charCode;

if(keyCode != 38 && keyCode != 40 && keyCode != 37 &&keyCode != 39 && keyCode != 13) {//38为上方向键，40为下方向键，37为左方向键，39为右方向键，13为回车键

varenterpriseName = document.getElementById("<%=txtAccount.ClientID%>").value;

try{

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch(new_ieerror) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch(ieerror) {

xmlHttp = false;

}

if(!xmlHttp && typeof xmlHttp != "undefined") {

try{

xmlHttp = new XMLHttpRequest();

} catch(error) {

xmlHttp = false;

}

if(xmlHttp) {

try{

var para = "SalerID="+ encodeURI(enterpriseName);

var url = "GetSalerID.aspx?"+ para;

xmlHttp.onreadystatechange = responseReq;

xmlHttp.open("GET", url, true);

xmlHttp.send(null);

} catch(con_error) {

alert("不能连接服务器，" + con_error);

}

} else{

alert("创建XMLHttpRequest对象失败！");

}

} elseif (keyCode == 38) {

varflag = false;

varresponseText = xmlHttp.responseText;

if(responseText != null && responseText!= "") {

varresponseArray = new Array();

responseArray =responseText.split(";");

for(var i = 0; i < responseArray.length; i++) {

if (document.getElementById("item"+ i).className == "message_hover"){

document.getElementById("item"+ i).className = "message";

if (i == 0) {

document.getElementById("item"+ (responseArray.length - 1)).className = "message_hover";

}

else {

document.getElementById("item"+ (i - 1)).className = "message_hover";

}

flag = true;

break;

}

if(!flag) {

document.getElementById("item"+ (responseArray.length - 1)).className = "message_hover";

}

} else if (keyCode == 40) {

varflag = false;

varresponseText = xmlHttp.responseText;

if(responseText != null && responseText!= "") {

varresponseArray = new Array();

responseArray =responseText.split(";");

for(var i = 0; i < responseArray.length; i++) {

if (document.getElementById("item"+ i).className == "message_hover"){

document.getElementById("item" + i).className = "message";

if (i == responseArray.length - 1) {

document.getElementById("item0").className= "message_hover";

}

else {

document.getElementById("item"+ (i + 1)).className = "message_hover";

}

flag = true;

break;

}

if(!flag) {

document.getElementById("item0").className= "message_hover";

}

} elseif (keyCode == 13) {

varresponseText = xmlHttp.responseText;

if(responseText != null && responseText!= "") {

varresponseArray = responseText.split(";");

for(var i = 0; i < responseArray.length; i++) {

if (document.getElementById("item"+ i).className == "message_hover"){

var enterprise_node = document.getElementById("<%=txtAccount.ClientID %>");

enterprise_node.value = document.getElementById("item"+ i).innerHTML;

var message_text = document.getElementById("showMessage");

message_text.innerHTML = "";

message_text.style.display = "none";

break;

}

function responseReq() {

if(xmlHttp.readyState == 4) {

var message_text = document.getElementById("showMessage");

if(xmlHttp.status == 200) {

varenterpriseName = document.getElementById("<%=txtAccount.ClientID%>").value;

if(enterpriseName != "") {

message_text.innerHTML= "";

var responseText = xmlHttp.responseText;

if (responseText != null&& responseText != "") {

message_text.style.display = "block";

var responseArray = newArray();

responseArray =responseText.split(";");

for (var i = 0; i< responseArray.length; i++) {

var showArray = newArray();

showArray =responseArray[i].split(",");

var str = "<divonmouseover='javascript:messageover(this);' ";

str += "onmouseout='javascript:messageout(this);' ";

str += "onclick='javascript:setEnterpriseName(this.innerHTML);'";

str += " class='message' id='item" +showArray[0] + "'>" +showArray[1] + "</div>";

message_text.innerHTML += str;

}

} else {

message_text.innerHTML = "";

message_text.style.display = "none";

}

} else{

message_text.innerHTML= "";

message_text.style.display = "none";

}

} else{

message_text.innerHTML = "";

message_text.style.display= "none";

}

function messageover(div_style) {

div_style.className = "message_hover";

}

functionmessageout(div_style) {

div_style.className = "message";

}

function setEnterpriseName(context) {

varenterprise_node = document.getElementById("<%=txtAccount.ClientID%>");

enterprise_node.value = context;

varmessage_text = document.getElementById("showMessage");

message_text.innerHTML = "";

message_text.style.display = "none";

}

</script>

3.在输入框控件（可以是input或是服务器控件textbox）中加入onkeyup="sendRequest(event);" autocomplete="off"

4.在输入框下方插入用于显示提示的div，根据实际情况修改样式 <div id="showMessage"style="line-height:25px;margin-top:-8px;"></div>

数据请求页面的代码，

protected voidPage_Load(object sender, EventArgs e)

{

stringSalerID = null;

if(Request["SalerID"] != null && Request["SalerID"].Trim()!= "")

{

SalerID = Request["SalerID"].Trim();

}

if(SalerID != null && SalerID != "")

{

SalerInfoBO_enterpriseBaseBO = BOProxyFactory.Create<SalerInfoBO>();//这里改成你相应的获取数据的方法

DataSetds = _enterpriseBaseBO.GetSalerID(SalerID);

DataTabledt = ds.Tables[0];

stringSalerList = "";

if(dt.Rows.Count > 0)

{

for(int i = 0; i < dt.Rows.Count; i++)

{

//这里改成你要用的字段dt.Rows[i][1]

SalerList += i + "," + dt.Rows[i][1].ToString() + ";";

}

SalerList =SalerList.Substring(0, SalerList.LastIndexOf(';'));

}

Response.Write(SalerList);

}

else

{

Response.Write("");

}

Response.End();

}

Bll层和DAL层的代码自己定吧。