再说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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
js验证表单大全
Nov 25 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
php实现加减法验证码代码
2014/02/14 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
Python中的pack和unpack的使用
2018/03/12 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
新手学python应该下哪个版本
2020/06/11 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
教师自我鉴定范文
2013/11/10 职场文书
精彩的大学生自我评价
2013/11/17 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
2015入党自传书范文
2015/06/26 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js