再说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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 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生成Flash动画的实现代码
2010/03/12 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
PHP中串行化用法示例
2016/11/16 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
javascript的键盘控制事件说明
2008/04/15 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python实现批量下载新浪博客的方法
2015/06/15 Python
Python中进程和线程的区别详解
2017/10/29 Python
24式加速你的Python(小结)
2019/06/13 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
C#面试问题
2016/07/29 面试题
自考生毕业自我鉴定
2013/10/10 职场文书
物业工作计划书
2014/01/10 职场文书
职业生涯规划书范文
2014/03/10 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
碧霞祠导游词
2015/02/09 职场文书
离婚起诉书范本
2015/05/18 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python