这里有新鲜出炉的精品教程,程序狗速度看过来!
Autocomplete 是一个在文本输入框中实现自动完成的 jQuery 插件
再说 AutoComplete 自动补全之实现原理, 这里以 asp.net 后台为主,考虑到性能最好是生成 xml 并入缓存。
一. 简述
昨天 support 一同事,帮她的客户做类似下面的效果(自动完成):
以前在搜房的时候,弄过这个,调用楼盘字典:
这是一个小功能,也是一个大功能。因为它可以做大,也可以做小。
二. 搜房的 AutoComplete
比如上面我们看到搜房的这个就做大了,你要看到这样一个效果,其实搜房做了这么几件事:
1. 数据库作业。把每天的楼盘字典存入 XML, 每个城市的对应一个 XML. 比如今天生成的 bj_11_04.xml
2. 业务逻辑层加上 Memcached。用户访问的时候,先判断 Memcached 里有没有,有的话走缓存,没有的话读 XML,并且入缓存。
3.AJAX 调用
4. 拼音调用楼盘字典(开始做了,后来又删了,原因不详),就是下面效果
所以,这个功能,可以做大,也可以做小。做大了要申请加服务器。所以做这个功能之前,要了解访问量。
三. 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 抓出来:
上面是 ASP.NET 下的实现,在 ASP.NET MVC2 或者 MVC3 或者 MVC4 中,我们不用使用 JavaScriptSerializer 和 ashx 这种方式来序列化成 JSON 并且向客户端 write,因为它们提供了 JSONResult
- public JsonResult GetResourceByKeyWord()
- {
- //get searchResult here
- return Json(searchResult, JsonRequestBehavior.AllowGet);
- }
来源: http://www.phperz.com/article/17/0710/282469.html