再说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 相关文章推荐
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
javascript this详细介绍
Sep 19 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
js实现简易聊天对话框
Aug 17 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
php fread函数使用方法总结
2019/05/28 PHP
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[03:08]Ti4观战指南上
2014/07/07 DOTA
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
css3进行截取替代js的substring
2013/09/02 HTML / CSS
暑期研修感言
2014/02/17 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
初三语文教学计划
2015/01/22 职场文书
2016新年慰问信范文
2015/03/25 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
同学聚会开幕词
2019/04/02 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
MySQL大小写敏感的注意事项
2021/05/24 MySQL
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python