|
我平時(shí)的軟件開發(fā)中，信息的搜索是經(jīng)常碰到的，增加搜索關(guān)鍵字提示是提高用戶體驗(yàn)的一種很好的辦法。今天就介紹下在ASP.NET如何利用AJAX來實(shí)現(xiàn)搜索的信息提示！
1.需要了解的一些知識(shí)點(diǎn) （1）AJAX對(duì)象不同瀏覽器的創(chuàng)建 不同的瀏覽器對(duì)AJAX（XMLHttpRequest）對(duì)象的實(shí)現(xiàn)是不一樣的，例如IE瀏覽器是通過ActiveX控件來實(shí)現(xiàn)AJAX對(duì)象。而其他一些瀏覽器比如火狐，它將AJAX對(duì)象實(shí)現(xiàn)成了一個(gè)瀏覽器內(nèi)部的對(duì)象叫XMLHttpRequest，所以不同的瀏覽器創(chuàng)建AJAX對(duì)象的方式也就不同，那么我們來看看不同瀏覽器之間創(chuàng)建AJAX對(duì)象的方式： 在IE瀏覽器下面的創(chuàng)建： //IE瀏覽器 try { //IE5.0 httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { //IE5.5 以上版本 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { }
在火狐瀏覽器下面的創(chuàng)建： //火狐, Safari 等瀏覽器 httpRequest = new XMLHttpRequest();
多瀏覽器AJAX對(duì)象創(chuàng)建函數(shù): function createAjaxObj() { var httpRequest = false; //判斷是否包含XMLHttpRequest對(duì)象 PS:將來IE高也有可能繼承次對(duì)象 if (window.XMLHttpRequest) { //火狐 , Safari 等瀏覽器 httpRequest = new XMLHttpRequest(); if (httpRequest.overrideMimeType) httpRequest.overrideMimeType('text/xml'); }//判斷是否支持Active控件對(duì)象 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) { } } } //返回創(chuàng)建好的AJAX對(duì)象 return httpRequest; }
（2）文本框內(nèi)容改變的事件在不同瀏覽器下的使用 文本框內(nèi)容改變的事件目前來說還沒有一個(gè)標(biāo)準(zhǔn)的版本。我們目前只關(guān)心IE與火狐好了，那么在IE和火狐下這兩個(gè)時(shí)間分別怎么表示呢？ IE： onpropertychange FireFox： oninput 那么如何在頁面加載時(shí)，根據(jù)瀏覽器給文本框附加對(duì)應(yīng)的change事件呢？ 1.JS如何判斷瀏覽器版本 //IE瀏覽器 if (navigator.userAgent.indexOf("MSIE") > 0) { } //火狐瀏覽器 if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {}
2.根據(jù)瀏覽器版本給文本框附加對(duì)應(yīng)事件 function getOs() { //判斷瀏覽器類型 if (navigator.userAgent.indexOf("MSIE") > 0) { //此時(shí)假設(shè)文本框id為'txtSearch' //為文本框附加IE所支持的事件 document.getElementById('txtSearch').attachEvent("onpropertychange", search); OsTyep = "MSIE"; } else if (navigator.userAgent.indexOf("Firefox") > 0) { //此時(shí)假設(shè)文本框id為'txtSearch' //為文本框附加火狐所支持的事件 document.getElementById('txtSearch').addEventListener("input", search, false); OsTyep = "Firefox"; } } 3.根據(jù)瀏覽器版本給文本框清除對(duì)應(yīng)事件 function ClearOS() {
if (navigator.userAgent.indexOf("MSIE") > 0) { //此時(shí)假設(shè)文本框id為'txtSearch'
//為文本框清除IE所支持的事件 document.getElementById('txtSearch').detachEvent("onpropertychange", search); OsTyep = "MSIE"; } else if (navigator.userAgent.indexOf("Firefox") > 0) { //此時(shí)假設(shè)文本框id為'txtSearch' //為文本框清除火狐所支持的事件 document.getElementById('txtSearch').removeEventListener("input", search, false); OsTyep = "Firefox"; } }
2.客戶端的設(shè)計(jì) （1）實(shí)現(xiàn)流程的分析 了解完以上知識(shí)點(diǎn)之后，我們來看一下實(shí)現(xiàn)搜索提示的一個(gè)整體流程： （1） 首先客戶端通過文本框輸入事件捕獲輸入的關(guān)鍵字 （2） 在通過我們之前創(chuàng)建好的AJAX對(duì)象提交給服務(wù)器 （3） 服務(wù)器接受提交的關(guān)鍵字，進(jìn)行查詢將結(jié)果集返回給客戶端進(jìn)行顯示 流程如下： （2）樣式的編寫 那么接下來我們來看一下樣式，其中包括當(dāng)文本框鼠標(biāo)移動(dòng)上去給邊框加顏色與搜索結(jié)果行選中的樣式等，這里就不細(xì)說了，列舉出來供參考： <style type="text/css" media="screen"> body { font:11px arial; } /*設(shè)置提示提示列表上的樣式表*/ .search_link { background-color:#FFFFFF; cursor: pointer; line-height:24px; text-indent:6px; } /*設(shè)置當(dāng)鼠標(biāo)移動(dòng)到提示列表上的樣式表*/ .search_link_over { background-color:#E8F2FE; cursor: pointer; line-height:24px; text-indent:6px; } /*設(shè)置顯示搜索提示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; } /*鼠標(biāo)放上文本框樣式*/ .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; } /*鼠標(biāo)離開文本框樣式*/ .mainInputFocus { width:552px; height:30px; border: 1px solid #41b5f2; } /*點(diǎn)擊文本框樣式*/ .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; } |
|
|
