再说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 相关文章推荐
IE下js调试工具Companion.JS
Oct 15 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
7个jQuery最佳实践
Jan 12 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
JS访问对象两种方式区别解析
Aug 29 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 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实现多张图片上传加水印技巧
2013/04/18 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
js资料prototype 属性
2007/03/13 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
python如何实现视频转代码视频
2019/06/17 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
J2EE面试题大全
2016/08/06 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
幼师自我鉴定
2014/02/01 职场文书
培训班主持词
2014/03/28 职场文书
赔偿协议书范本
2014/04/15 职场文书
师德演讲稿范文
2014/05/06 职场文书
文明社区申报材料
2014/08/21 职场文书
给领导的感谢信范文
2015/01/23 职场文书
世界遗产的导游词
2015/02/13 职场文书
收入证明申请书
2015/06/12 职场文书
校运会班级霸气口号
2015/12/24 职场文书
《黄道婆》教学反思
2016/02/22 职场文书