再說AutoComplete自動(dòng)補(bǔ)全之實(shí)現(xiàn)原理
昨天support一同事，幫她的客戶做類似下面的效果（自動(dòng)完成）：
以前在搜房的時(shí)候，弄過這個(gè)，調(diào)用樓盤字典：
這是一個(gè)小功能，也是一個(gè)大功能。因?yàn)樗梢宰龃?，也可以做小?BR>二.搜房的AutoComplete
比如上面我們看到搜房的這個(gè)就做大了，你要看到這樣一個(gè)效果，其實(shí)搜房做了這么幾件事：
1.數(shù)據(jù)庫作業(yè)。把每天的樓盤字典存入XML,每個(gè)城市的對(duì)應(yīng)一個(gè)XML.比如今天生成的bj_11_04.xml
2.業(yè)務(wù)邏輯層加上Memcached。用戶訪問的時(shí)候，先判斷Memcached里有沒有，有的話走緩存，沒有的話讀XML，并且入緩存。
3.AJAX調(diào)用
4.拼音調(diào)用樓盤字典（開始做了，后來又刪了，原因不詳），就是下面效果
所以，這個(gè)功能，可以做大，也可以做小。做大了要申請(qǐng)加服務(wù)器。所以做這個(gè)功能之前，要了解訪問量。
三.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>
后臺(tái)代碼：
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);
}
可能有人會(huì)問，context.Request.QueryString["term"];中的term是怎么來的？我們通過aspx根本看不到term。
我們可以用任何瀏覽器的F12的NetWork抓出來：
上面是ASP.NET下的實(shí)現(xiàn)，在ASP.NET MVC2或者M(jìn)VC3或者M(jìn)VC4中，我們不用使用JavaScriptSerializer和ashx 這種方式來序列化成JSON并且向客戶端write，因?yàn)樗鼈兲峁┝薐SONResult
public JsonResult GetResourceByKeyWord()
{
//get searchResult here
return Json(searchResult, JsonRequestBehavior.AllowGet);
}
- jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
- jQuery 插件autocomplete自動(dòng)完成應(yīng)用(自動(dòng)補(bǔ)全)(asp.net后臺(tái))
- inputSuggest文本框輸入時(shí)提示、自動(dòng)完成效果(郵箱輸入自動(dòng)補(bǔ)全插件)
- Python 自動(dòng)補(bǔ)全(vim)
- 給Python IDLE加上自動(dòng)補(bǔ)全和歷史功能
- JSP + ajax實(shí)現(xiàn)輸入框自動(dòng)補(bǔ)全功能 實(shí)例代碼
- js自動(dòng)閉合html標(biāo)簽(自動(dòng)補(bǔ)全html標(biāo)記)
- Python實(shí)現(xiàn)Tab自動(dòng)補(bǔ)全和歷史命令管理的方法
- PHP實(shí)現(xiàn)HTML標(biāo)簽自動(dòng)補(bǔ)全代碼
- jquery css實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全
相關(guān)文章
本文是小編根據(jù)bootstrap的折疊設(shè)計(jì)的樹狀圖顯示效果，只有二級(jí)顯示，可以用在簡單的目錄等。對(duì)實(shí)現(xiàn)代碼感興趣的朋友可以參考下本文2016-11-11
jQuery實(shí)現(xiàn)復(fù)選框的全選和反選
本文主要分享了使用jQuery實(shí)現(xiàn)復(fù)選框的全選和反選的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jQuery控制frames及frame頁面JS的方法,涉及jQuery針對(duì)頁面元素的判定及frame框架的操作技巧,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細(xì)介紹了五個(gè)步驟輕松實(shí)現(xiàn)zTree的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
JQuery中綁定事件（bind()）和移除事件（unbind()）
本文主要向大家詳細(xì)介紹了jQuery的綁定事件和移除事件的使用方法和示例分享，這里推薦給有需要的小伙伴們參考下。2015-02-02
這篇文章主要介紹了Jquery中Event對(duì)象屬性的操作方法的總結(jié)，非常的詳細(xì)，是篇十分不錯(cuò)的文章，這里推薦給大家。2015-02-02
jQuery解析json格式數(shù)據(jù)簡單實(shí)例
這篇文章主要介紹了jQuery解析json格式數(shù)據(jù)的方法,結(jié)合實(shí)例分析了使用jQuery1.7.2版本的方法解析json格式數(shù)據(jù)的技巧,需要的朋友可以參考下2016-01-01
正負(fù)小數(shù)點(diǎn)后兩位浮點(diǎn)數(shù)實(shí)現(xiàn)原理及代碼
需要做個(gè)對(duì)兩位小數(shù)點(diǎn)的正負(fù)浮點(diǎn)數(shù)的處理要求：非數(shù)字或者.字符自動(dòng)清除，并對(duì).12自動(dòng)修補(bǔ).前的0，實(shí)現(xiàn)原理如下，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)評(píng)論模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
jquery快捷動(dòng)態(tài)綁定鍵盤事件的操作函數(shù)代碼
動(dòng)態(tài)綁定鍵盤事件的方法或許會(huì)有很多，在本文將為大家介紹下jquery是如何快捷實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過2013-10-10