再说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 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
常用DOM整理
Jun 16 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
javascript流程控制语句集合
Sep 18 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
详解React 的几种条件渲染以及选择
Oct 23 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
桌面中心(一)创建数据库
2006/10/09 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
Python中的yield浅析
2014/06/16 Python
python django集成cas验证系统
2014/07/14 Python
python图像处理之镜像实现方法
2015/05/30 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
使用Python实现分别输出每个数组
2019/12/06 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
python简单实现插入排序实例代码
2020/12/16 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
经典c++面试题三
2015/07/08 面试题
大学生个人求职信范文
2013/09/21 职场文书
文秘专业应届生求职信范文
2013/11/14 职场文书
火锅店的活动方案
2014/08/15 职场文书
自我查摆剖析材料
2014/10/11 职场文书
英语辞职信怎么写
2015/02/28 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
2015年端午节活动方案
2015/05/05 职场文书
学校捐款活动总结
2015/05/09 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
关于环保的广播稿
2015/12/17 职场文书
工作一年自我鉴定
2019/06/20 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书