再说AutoComplete自动补全之实现原理


Posted in Javascript onNovember 05, 2011

一.简述
昨天support一同事,帮她的客户做类似下面的效果(自动完成):

再说AutoComplete自动补全之实现原理

以前在搜房的时候,弄过这个,调用楼盘字典:

再说AutoComplete自动补全之实现原理

这是一个小功能,也是一个大功能。因为它可以做大,也可以做小。
二.搜房的AutoComplete
比如上面我们看到搜房的这个就做大了,你要看到这样一个效果,其实搜房做了这么几件事:

1.数据库作业。把每天的楼盘字典存入XML,每个城市的对应一个XML.比如今天生成的bj_11_04.xml
2.业务逻辑层加上Memcached。用户访问的时候,先判断Memcached里有没有,有的话走缓存,没有的话读XML,并且入缓存。
3.AJAX调用
4.拼音调用楼盘字典(开始做了,后来又删了,原因不详),就是下面效果

再说AutoComplete自动补全之实现原理

所以,这个功能,可以做大,也可以做小。做大了要申请加服务器。所以做这个功能之前,要了解访问量。
三.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抓出来:

再说AutoComplete自动补全之实现原理

上面是ASP.NET下的实现,在ASP.NET MVC2或者MVC3或者MVC4中,我们不用使用JavaScriptSerializer和ashx 这种方式来序列化成JSON并且向客户端write,因为它们提供了JSONResult

public JsonResult GetResourceByKeyWord() 
{ 
//get searchResult here 
return Json(searchResult, JsonRequestBehavior.AllowGet); 
}
Javascript 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
IE与FireFox的兼容性问题分析
Apr 22 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 #Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 #Javascript
由Javascript实现的页面日历
Nov 04 #Javascript
jQuery中jqGrid分页实现代码
Nov 04 #Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 #Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 #Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 #Javascript
You might like
PHP 网页过期时间的控制代码
2009/06/29 PHP
解析php中const与define的应用区别
2013/06/18 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
详解js的六大数据类型
2016/12/27 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
浅析python中while循环和for循环
2019/11/19 Python
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
辅导员评语
2014/05/04 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
团组织推优材料
2014/12/29 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
护理心得体会范文
2016/01/22 职场文书