再说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 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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基础知识:类与对象(1)
2006/12/13 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
JS实现动态星空背景效果
2019/11/01 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
Python的多态性实例分析
2015/07/07 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
python实现猜拳游戏
2020/03/04 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
c语言常见笔试题总结
2016/09/05 面试题
校园广播稿500字
2014/02/04 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
书香校园建设方案
2014/05/02 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS