再说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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jquery 最简单易用的表单验证插件
Feb 27 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
js实现弹框效果
Mar 24 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应用提速面面观
2006/10/09 PHP
PHP4实际应用经验篇(9)
2006/10/09 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
AngularJS语法详解
2015/01/23 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
Python基础学习之常见的内建函数整理
2017/09/06 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
银行自荐信范文
2013/10/07 职场文书
英语自荐信常用语句
2013/12/13 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
Python中异常处理用法
2021/11/27 Python
Elasticsearch 索引操作和增删改查
2022/04/19 Python