再说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中的property和attribute介绍
Dec 26 Javascript
javascript时间函数大全
Jun 30 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
限制只能输入数字的实现代码
May 16 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 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用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
Javascript的一种模块模式
2010/09/08 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
PyCharm代码格式调整方法
2018/05/23 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Python colormap库的安装和使用详情
2020/10/06 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
学习决心书范文
2014/03/11 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
公司股东出资证明书
2014/11/01 职场文书
教师群众路线心得体会
2014/11/04 职场文书
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android