C#(asp.net)仿baidu或google智能匹配搜索下拉框

页面文件代码：

//文本输入框
//选择后的数字值

//下拉框的点击

 

//下拉框效果    

css代码：
.search{float: left;height: 22px;width: 165px;margin: 0px;padding: 0px;}
.search .input2{padding-top:2px;height:22px;width: 155px;font-size:12px;background:#fff url(../../images/ClientLogin1/search_btn.gif) no-repeat right 0;
}
.btn{ padding:0px; margin:0px; float:left;}
.label{color:#ccc;position:absolute;left:12px;top:0px;display:block;height:22px;line-height:22px;font-size:12px;}
span.submit{cursor:pointer;position:absolute;left:138px;top:0px;width:20px;height:20px;text-indent:-999em;}
.text{width:154px; HEIGHT: 200px;margin:5px 0px;padding: 0px; position:absolute; top:230px; left:176px; z-index:2; background-color:#fff; overflow:hidden; border:1px solid #404040;}
.text ul {margin: 0px;padding: 0px;text-align: left;clear: left;height: auto;width: 153px;}
.text li{height: auto;width: 153px;margin: 0px;padding: 0px;background-color:#fff;position:relative;text-indent: 5px;}
.text p{line-height: 20px;font-size: 10px;font-family: Verdana, Arial, Helvetica, sans-serif;margin: 0px;padding: 0px;text-align: justify;font-weight: normal;color: #000000;text-indent: 10px;height: 20px;}

css中用到的图片文件：

js代码：
function keySelectHistory()
{
document.getElementById('keytext').style.display = ''
}
function keySelectHistory2()
{
var key=document.getElementById('keyword').value;
var sendData="key="+key+"";
var result=postHTML("service/Chooserealm.aspx", sendData, function(result){receive_CallBack(result) });
}
function receive_CallBack(result)
{
if(result==false) { return; }
 document.getElementById('keytext').className="text";
document.getElementById('keytext').innerHTML =result;
}

Chooserealm.aspx文件代码:
        string key = Microsoft.JScript.GlobalObject.unescape(Request["key"]).Trim();
        string Remark = "1=1";
        if (key == null || key == "")
        {
            Remark = "1=1";
        }
        else
        {
            Remark = " service_text like '" + key + "%'";
        }
        DataTable dt = new chat.dal.chatconnect().chat_service_getlistremark(1, Remark);
        string result = "";
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            result += "

" + dt.Rows[i]["service_text"].ToString().Trim() + "

";
        }
      
        Response.Clear();
        Response.Write(result);
        Response.End();

存储过程代码：
CREATE PROCEDURE [dbo].[chat_service_getlistremark]       
@pid int,  
@Remark varchar(100)      
AS      
    
--如果不存在下一级服务列表，则返回父节点服务记录   
declare @sql nvarchar(2000)   
IF NOT EXISTS( SELECT [id] from chatservice where pid=@pid)    
 set @sql='select  [id],[pid],[service_text],[service],isendnode from chatservice where [id]='+cast(@pid as varchar(20))+' and useflag=1 and '+@Remark+''    
ELSE    
 set @sql='select  [id],[pid],[service_text],[service],isendnode from chatservice where pid='+cast(@pid as varchar(20))+' and useflag=1 and '+@Remark+' order by vieworder asc'   
exec sp_Executesql @sql