再說AutoComplete自動補全之實現(xiàn)原理
更新時間：2011年11月05日 13:12:54 作者：
再說AutoComplete自動補全之實現(xiàn)原理,這里以asp.net后臺為主，考慮到性能最好是生成xml并入緩存。
一.簡述
昨天support一同事，幫她的客戶做類似下面的效果（自動完成）：
<link rel="stylesheet" href="Styles/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="Scripts/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$('#tbSearch').autocomplete({
source: "AutoComplete.ashx"
});
});
</script>
后臺代碼：
public void ProcessRequest(HttpContext context)
{
string searchText = context.Request.QueryString["term"];
//Get Result here
//````
//````
//Get Result here
JavaScriptSerializer serializer = new JavaScriptSerializer();
string jsonString = serializer.Serialize(results);
context.Response.Write(jsonString);
}
可能有人會問，context.Request.QueryString["term"];中的term是怎么來的？我們通過aspx根本看不到term。
我們可以用任何瀏覽器的F12的NetWork抓出來：
public JsonResult GetResourceByKeyWord()
{
//get searchResult here
return Json(searchResult, JsonRequestBehavior.AllowGet);
}
昨天support一同事，幫她的客戶做類似下面的效果（自動完成）：
以前在搜房的時候，弄過這個，調(diào)用樓盤字典：
這是一個小功能，也是一個大功能。因為它可以做大，也可以做小。
二.搜房的AutoComplete
比如上面我們看到搜房的這個就做大了，你要看到這樣一個效果，其實搜房做了這么幾件事：
1.數(shù)據(jù)庫作業(yè)。把每天的樓盤字典存入XML,每個城市的對應一個XML.比如今天生成的bj_11_04.xml
2.業(yè)務邏輯層加上Memcached。用戶訪問的時候，先判斷Memcached里有沒有，有的話走緩存，沒有的話讀XML，并且入緩存。
3.AJAX調(diào)用
4.拼音調(diào)用樓盤字典（開始做了，后來又刪了，原因不詳），就是下面效果
所以，這個功能，可以做大，也可以做小。做大了要申請加服務器。所以做這個功能之前，要了解訪問量。
三.Coding
下面說下昨天做的東西，完全基于JqueryUI,
ASPX代碼：
復制代碼 代碼如下:
<link rel="stylesheet" href="Styles/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="Scripts/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$('#tbSearch').autocomplete({
source: "AutoComplete.ashx"
});
});
</script>
后臺代碼：
復制代碼 代碼如下:
public void ProcessRequest(HttpContext context)
{
string searchText = context.Request.QueryString["term"];
//Get Result here
//````
//````
//Get Result here
JavaScriptSerializer serializer = new JavaScriptSerializer();
string jsonString = serializer.Serialize(results);
context.Response.Write(jsonString);
}
可能有人會問，context.Request.QueryString["term"];中的term是怎么來的？我們通過aspx根本看不到term。
我們可以用任何瀏覽器的F12的NetWork抓出來：
上面是ASP.NET下的實現(xiàn)，在ASP.NET MVC2或者MVC3或者MVC4中，我們不用使用JavaScriptSerializer和ashx 這種方式來序列化成JSON并且向客戶端write，因為它們提供了JSONResult
復制代碼 代碼如下:
public JsonResult GetResourceByKeyWord()
{
//get searchResult here
return Json(searchResult, JsonRequestBehavior.AllowGet);
}
相關(guān)文章
本文是小編根據(jù)bootstrap的折疊設計的樹狀圖顯示效果，只有二級顯示，可以用在簡單的目錄等。對實現(xiàn)代碼感興趣的朋友可以參考下本文2016-11-11
本文主要分享了使用jQuery實現(xiàn)復選框的全選和反選的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jQuery控制frames及frame頁面JS的方法,涉及jQuery針對頁面元素的判定及frame框架的操作技巧,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細介紹了五個步驟輕松實現(xiàn)zTree的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
JQuery中綁定事件（bind()）和移除事件（unbind()）
本文主要向大家詳細介紹了jQuery的綁定事件和移除事件的使用方法和示例分享，這里推薦給有需要的小伙伴們參考下。2015-02-02
這篇文章主要介紹了Jquery中Event對象屬性的操作方法的總結(jié)，非常的詳細，是篇十分不錯的文章，這里推薦給大家。2015-02-02
這篇文章主要介紹了jQuery解析json格式數(shù)據(jù)的方法,結(jié)合實例分析了使用jQuery1.7.2版本的方法解析json格式數(shù)據(jù)的技巧,需要的朋友可以參考下2016-01-01
正負小數(shù)點后兩位浮點數(shù)實現(xiàn)原理及代碼
需要做個對兩位小數(shù)點的正負浮點數(shù)的處理要求：非數(shù)字或者.字符自動清除，并對.12自動修補.前的0，實現(xiàn)原理如下，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)評論模塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
jquery快捷動態(tài)綁定鍵盤事件的操作函數(shù)代碼
動態(tài)綁定鍵盤事件的方法或許會有很多，在本文將為大家介紹下jquery是如何快捷實現(xiàn)的，感興趣的朋友不要錯過2013-10-10