仿百度.docVIP

C#()仿baidu或google智能匹配搜索下拉框?? 2010-07-23 16:47:15|??分类：  HYPERLINK /blog/ \l m=0t=1c=fks_080067082095089064083082074064092080087068084086 \o c#.NET c#.NET |字号?订阅 ?自从百度和谷歌采用智能匹配搜索之后，这种技术效果被众多网站采用，有效提高了用户体验。智能匹配搜索就是当你在文本框输入某个字时，这时文本框的下面就会出现与该字相关匹配的关键字。??? 本人当初在开发英文livechat时，运用到了此技术，现在讲解如下。先看效果图： ?当在文本框中输入A时，下拉框就会显示与A相关联的信息内容。详细代码如下：页面文件代码：div class=inputdiv style=top:215px;div class=searchinput 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;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;