再说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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
python爬虫可以爬什么
2020/06/16 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
Python是怎样处理json模块的
2020/07/16 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
Shell如何接收变量输入
2012/09/24 面试题
《猫》教学反思
2014/02/26 职场文书
高中同学会活动方案
2014/08/14 职场文书
员工试用期自我评价
2014/09/18 职场文书
教师个人教学总结
2015/02/11 职场文书
纪委立案决定书
2015/06/24 职场文书
天气温馨提示语
2015/07/14 职场文书
中秋节感想
2015/08/10 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
详解python字符串驻留技术
2021/05/21 Python
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
Python os和os.path模块详情
2022/04/02 Python
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript