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

2010-3-1 15:52:12    来源：25亿    

    自从百度和谷歌采用智能匹配搜索之后，这种技术效果被众多网站采用，有效提高了用户体验。智能匹配搜索就是当你在文本框输入某个字时，这时文本框的下面就会出现与该字相关匹配的关键字。
http://www.25yi.com/wangyesheji/Caspnetfangbaiduhuogooglezhi-118/
    本人当初在开发英文livechat时，运用到了此技术，现在讲解如下。

先看效果图：

当在文本框中输入A时，下拉框就会显示与A相关联的信息内容。

详细代码如下：

页面文件代码：
<div class="inputdiv" style="top:215px;">
<div class="search">
<input name="keyword" type="text" class="input2" id="keyword" value=""  style="float:left;" onkeyup="keySelectHistory2()"  onclick="keySelectHistory()"/>//文本输入框
<input name="drpservicearea" id="drpservicearea" type="hidden" />//选择后的数字值
<span  class="submit" onClick="return keySelectHistory();"></span></div>//下拉框的点击
</div>
<div class="text" style="SCROLLBAR-FACE-COLOR: #C2C2C2; SCROLLBAR-HIGHLIGHT-COLOR: #D8D7D5; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: #808080; SCROLLBAR-ARROW-COLOR: #000000;  SCROLLBAR-DARKSHADOW-COLOR: #000000; BACKGROUND-COLOR: #FFFFFF" id="keytext" style="display:none">
</div>//下拉框效果   

css代码：
.search{float: left;height: 22px; 165px;margin: 0px;padding: 0px;}
.search .input2{padding-top:2px;height:22px; 155px;font-size:12px;background:#fff url(http://images.cnblogs.com/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;20px;height:20px;text-indent:-999em;}
.text{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; 153px;}
.text li{height: auto; 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 += "<p onMouseOver=\"this.style.backgroundColor='#B4D7E9';\" onMouseOut=\"this.style.backgroundColor=''\" onClick=\"clickkey('" + dt.Rows[i]["service_text"].ToString().Trim() + "'," + dt.Rows[i]["id"].ToString().Trim() + ")\" style=\"cursor:pointer\">" + dt.Rows[i]["service_text"].ToString().Trim() + "</p>";
        }
     
        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

C#(asp.net)仿baidu或google智能匹配搜索下拉框讲解完毕，需要自己深刻理解，如有疑问，也可以到25亿企业网站管理系统技术社区的网站建设栏目处提问。请研究25亿企业网站管理系统源码。