亚洲se主站,日本三级迅雷下载,午夜爽爽视频

ASP.NET 利用AJAX實(shí)現(xiàn)搜索提示

轉(zhuǎn)帖|其它|編輯：郝浩|2011-08-01 14:14:35.000|閱讀 711 次

概述：我平時(shí)的軟件開發(fā)中，信息的搜索是經(jīng)常碰到的，增加搜索關(guān)鍵字提示是提高用戶體驗(yàn)的一種很好的辦法。今天就介紹下在ASP.NET如何利用AJAX來實(shí)現(xiàn)搜索的信息提示！

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

　　我平時(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ù):

　　（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)事件

　　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";
     } elseif (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è)整體流程：

首先客戶端通過文本框輸入事件捕獲輸入的關(guān)鍵字
在通過我們之前創(chuàng)建好的AJAX對(duì)象提交給服務(wù)器
服務(wù)器接受提交的關(guān)鍵字，進(jìn)行查詢將結(jié)果集返回給客戶端進(jìn)行顯示

　　（2）樣式的編寫

　　那么接下來我們來看一下樣式，其中包括當(dāng)文本框鼠標(biāo)移動(dòng)上去給邊框加顏色與搜索結(jié)果行選中的樣式等，這里就不細(xì)說了，列舉出來供參考：

　　（3）aspx頁面與ajax_search.js文件的編寫

　　接下來就是一個(gè)比較重要的環(huán)節(jié)了，aspx頁面與ajax_search.js文件中包含了整體包括顯示與請(qǐng)求的方法例如：

　　1.頁面的實(shí)現(xiàn)

　　 2.根據(jù)瀏覽器創(chuàng)建AJAX對(duì)象

　　3.創(chuàng)建請(qǐng)求與返回?cái)?shù)據(jù)的顯示

//異步請(qǐng)求服務(wù)器獲取搜索結(jié)果
function search() {
     if (searchReq.readyState ==4|| searchReq.readyState ==0) {
         //獲得文本框中的值
var valStr = escape(document.getElementById("txtSearch").value);
         //建立連接
        searchReq.open("GET", encodeURI('Search.ashx?search='+ valStr+'&fresh='+ Math.random()), true);
         //當(dāng)請(qǐng)求狀態(tài)改變時(shí)調(diào)用 handleSearch方法
        searchReq.onreadystatechange = handleSearch;
         searchReq.send( null);
     }
}

//返回結(jié)果處理方法
function handleSearch() {
     if (searchReq.readyState ==4) {
         //獲得搜索提示結(jié)果的元素DIV
var searchDIV = document.getElementById("search_div");
         searchDIV.innerHTML ="";

         //用^將返回的文本數(shù)據(jù)分割成數(shù)組
var resultStrArr = searchReq.responseText.split("^");

         //循環(huán)構(gòu)建HTML代碼
for (var i =0; i < resultStrArr.length -1; i++) {
             var htmlStr ='<div onmouseover="selectOverDiv(this,'+i+');" ';
             htmlStr +='onmouseout="selectOutDiv(this,'+i+');" ';
             htmlStr +='onclick="setSearch(this.innerHTML);" ';
             htmlStr +='class="search_link " style="display:block;width:100%;" >'+ resultStrArr[i] +'</div>';

             searchDIV.innerHTML += htmlStr;
         }
         ShowDiv();
         x =-1;
     }
}

　　 4.將數(shù)據(jù)選中數(shù)據(jù)顯示文本框中

　　上邊代碼中在循環(huán)構(gòu)建HTML代碼時(shí)，我們給構(gòu)建的DIV加入了三個(gè)事件分別是：

　　1 onmouseover="selectOverDiv(this,'+i+');"

　　 2 onmouseout="selectOutDiv(this,'+i+');"

　　當(dāng)鼠標(biāo)放上去時(shí)調(diào)用selectOutDiv函數(shù)傳遞自己進(jìn)去

　　3 onclick="setSearch(this.innerHTML);"

　　當(dāng)鼠標(biāo)點(diǎn)擊DIV時(shí)調(diào)用setSearch函數(shù)傳入本身DIV中內(nèi)容

　　那么還是來看下這幾個(gè)方法的實(shí)現(xiàn)吧：

　　 5.增加鍵盤上下鍵選中提示數(shù)據(jù)與回車鍵選中數(shù)據(jù)到文本框

　　 3.服務(wù)器端的設(shè)計(jì)

　　（1）實(shí)現(xiàn)一個(gè)虛擬的數(shù)據(jù)源

　　前臺(tái)傳來關(guān)鍵字，后臺(tái)必須要有數(shù)據(jù)匹配，為了簡(jiǎn)單我就不建立數(shù)據(jù)庫了我就模擬一個(gè)數(shù)據(jù)源好啦！

　　步驟：右鍵項(xiàng)目 --> 添加新項(xiàng)--> 選擇一般處理程序命名為：Search.ashx 編寫代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.CodeDom;
using System.Globalization;
using System.ComponentModel;
using System.Collections;

public class Search : IHttpHandler {

     //定義一個(gè)數(shù)據(jù)源
     public List <string> DataSource
     {
         get
         {
             List <string> list = new List<string>()
             {
                 "我愛C#",
                 "我愛.NET",
                 "我愛微軟技術(shù)"
             };
             return list;
         }
     }

     public void ProcessRequest (HttpContext context) {
         context.Response.ContentType = "text/plain";
     }

     public bool IsReusable {
         get {
             return false;
         }
     }

}

　　（2）搜索數(shù)據(jù)源返回固定格式數(shù)據(jù)以字符串形式

　　緊接著我們要在ProcessReques方法中加入我們搜索數(shù)據(jù)源構(gòu)建返回相應(yīng)數(shù)據(jù)集，拼接結(jié)果字符串返回給客戶端。代碼如下：

  public void ProcessRequest (HttpContext context) {
         context.Response.ContentType = "text/plain";

         //接受客戶端關(guān)鍵字并且解碼
       string searchStr = HttpUtility.UrlDecode(context.Request.QueryString[ "search"].ToString(), System.Text.Encoding.UTF8);

         //搜索數(shù)據(jù)源集合中匹配的關(guān)鍵字
         var result = (from string n in DataSource
                           where n.Contains(searchStr)
                           select n).ToList <string>();

         StringBuilder sb = new StringBuilder(100);
         //將匹配關(guān)鍵字用符號(hào)^ 分割拼接成字符串
         foreach (string str in result as List <string>)
         {
             sb.AppendFormat( "{0}^", str);
         }
         //返回客戶端
         context.Response.Write(sb.ToString());
     }

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：博客園

上一篇：Spread中文版正式發(fā)布啦！下一篇：C#中的List泛型類示例