再说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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
JS中常用的消息框总结
Feb 24 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
小程序如何写动态标签的实现方法
Feb 05 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正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python 转义字符详细介绍
2017/03/21 Python
python中int与str互转方法
2018/07/02 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
高中生自我评价个人范文
2013/11/09 职场文书
高中军训广播稿
2014/01/14 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js