再说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 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 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简单实现多维数组排序的方法
2016/09/30 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
JS删除字符串中重复字符方法
2014/03/09 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
canvas实现钟表效果
2017/02/13 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
linux下python抓屏实现方法
2015/05/22 Python
详解Python中的Cookie模块使用
2015/07/06 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
python下载图片实现方法(超简单)
2017/07/21 Python
python机器学习之神经网络实现
2018/10/13 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
酒店总经理助理岗位职责
2014/02/01 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
书香校园建设方案
2014/05/02 职场文书
2015年端午节活动方案
2015/05/05 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
MySQL数字类型自增的坑
2021/05/07 MySQL
Django实现翻页的示例代码
2021/05/24 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP
一级电子管军用接收机测评
2022/04/05 无线电
python中 .npy文件的读写操作实例
2022/04/14 Python
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL