我平時的軟件開發中，信息的搜索是經常碰到的，增加搜索關鍵字提示是提高用戶體驗的一種很好的辦法。今天就介紹下在ASP.NET如何利用AJAX來實現搜索的信息提示！
//IE瀏覽器
try {
//IE5.0
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//IE5.5 以上版本
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
//火狐, Safari 等瀏覽器
httpRequest = new XMLHttpRequest();
function createAjaxObj() {
var httpRequest = false;
//判斷是否包含XMLHttpRequest對象 PS:將來IE高也有可能繼承次對象
if (window.XMLHttpRequest) {
//火狐 , Safari 等瀏覽器
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType)
httpRequest.overrideMimeType('text/xml');
}//判斷是否支持Active控件對象
else if (window.ActiveXObject) {
//IE瀏覽器
try {
//IE5.0
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//IE5.5以上
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
//返回創建好的AJAX對象
return httpRequest;
}
//IE瀏覽器
if (navigator.userAgent.indexOf("MSIE") > 0)
{ }
//火狐瀏覽器
if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0)
{}
function getOs() {
//判斷瀏覽器類型
if (navigator.userAgent.indexOf("MSIE") > 0) {
//此時假設文本框id為'txtSearch'
//為文本框附加IE所支持的事件
document.getElementById('txtSearch').attachEvent("onpropertychange", search);
OsTyep = "MSIE";
} else if (navigator.userAgent.indexOf("Firefox") > 0) {
//此時假設文本框id為'txtSearch'
//為文本框附加火狐所支持的事件
document.getElementById('txtSearch').addEventListener("input", search, false);
OsTyep = "Firefox";
}
}
3.根據瀏覽器版本給文本框清除對應事件
function ClearOS() {
if (navigator.userAgent.indexOf("MSIE") > 0) {
//此時假設文本框id為'txtSearch'
//為文本框清除IE所支持的事件
document.getElementById('txtSearch').detachEvent("onpropertychange", search);
OsTyep = "MSIE";
} else if (navigator.userAgent.indexOf("Firefox") > 0) {
//此時假設文本框id為'txtSearch'
//為文本框清除火狐所支持的事件
document.getElementById('txtSearch').removeEventListener("input", search, false);
OsTyep = "Firefox";
}
}
<style type="text/css" media="screen">
body
{
font:11px arial;
}
/*設置提示提示列表上的樣式表*/
.search_link
{
background-color:#FFFFFF;
cursor: pointer;
line-height:24px;
text-indent:6px;
}
/*設置當鼠標移動到提示列表上的樣式表*/
.search_link_over
{
background-color:#E8F2FE;
cursor: pointer;
line-height:24px;
text-indent:6px;
}
/*設置顯示搜索提示div的樣式表*/
#search_div
{
position:absolute;
background-color:#FFFFFF;
text-align:left;
border:1px solid #000000;
border-top:0px;
display:none;
min-width:553px;
width:553px;
}
/*文本框樣式*/
.mainInput {
line-height: 26px;
height: 28px;
width: 550px;
font-size: 16px;
font-family: "微軟雅黑", "宋體", Candara;
font-weight: normal;
color: #666;
margin: auto;
border: none;
text-indent: 8px;
}
/*鼠標放上文本框樣式*/
.mainInputOver {
width:552px;
height:30px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #b7b7b7;
border-right-color: #d0d0d0;
border-bottom-color: #d0d0d0;
border-left-color: #d0d0d0;
}
/*鼠標離開文本框樣式*/
.mainInputFocus {
width:552px;
height:30px;
border: 1px solid #41b5f2;
}
/*點擊文本框樣式*/
.myBorder
{
width:552px;
height:30px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
}
</style>
