一.简述

昨天support一同事,帮她的客户做类似下面的效果(自动完成):

以前在搜房的时候,弄过这个,调用楼盘字典:

这是一个小功能,也是一个大功能。因为它可以做大,也可以做小。

二.搜房的AutoComplete

比如上面我们看到搜房的这个就做大了,你要看到这样一个效果,其实搜房做了这么几件事:

1.数据库作业。把每天的楼盘字典存入XML,每个城市的对应一个XML.比如今天生成的bj_11_04.xml

2.业务逻辑层加上Memcached。用户访问的时候,先判断Memcached里有没有,有的话走缓存,没有的话读XML,并且入缓存。

3.AJAX调用

4.拼音调用楼盘字典(开始做了,后来又删了,原因不详),就是下面效果

所以,这个功能,可以做大,也可以做小。做大了要申请加服务器。所以做这个功能之前,要了解访问量。

三.Coding

下面说下昨天做的东西,完全基于JqueryUI,

ASPX代码:

1
2
3
4
5
6
7
8
9
10
<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>

后台代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
2
3
4
5
public JsonResult GetResourceByKeyWord()
{
    //get searchResult here
    return Json(searchResult, JsonRequestBehavior.AllowGet);

最新文章

  1. java中如何实现多态
  2. iOS之处理不等高TableViewCell的几种方法
  3. Android开发笔记&mdash;&mdash;常见BUG类型之内存泄露与线程安全
  4. 暑假集训(1)第八弹 -----简单迷宫(Poj3984)
  5. Javascript面向对象编程(二):构造函数的继承 by 阮一峰
  6. GCOV 使用用例
  7. MFC 对话框中动态创建N级菜单以及响应事件
  8. Java线程学习笔记(一个)
  9. Centos中压缩(zip)和解压(unzip)命令
  10. 项目整体说明及WBS练习
  11. MARK DOWN 书写格式说明
  12. Java 执行远程主机shell命令代码
  13. SqlBulkCopy 批量插入
  14. MySQL 5.7.16 字符串拆分 -&gt; 单列变多行记录(转发)
  15. C# WPF DevExpress 图表控件之柱状图
  16. MYeclipse 和 flex 环境配置
  17. i2c总线,核心,驱动详解
  18. java中pojo、dao命名解释
  19. ||在oracle数据库中起到字符串拼接的作用
  20. C++ 读写MySQL经典 (转载)

热门文章

  1. elasticsearch报错expected &lt;block end&gt;, but found BlockMappingStart解决方法
  2. 8.2.1 UML, 组合和聚合、关联和依赖
  3. Python数据类型-布尔/数字/字符串/列表/元组/字典/集合
  4. GoogleNet:inceptionV3论文学习
  5. [2013-01-15]The Little Schemer 学习笔记
  6. 微信中通过页面(H5)直接打开本地app的解决方案
  7. OCUpload的简单介绍与使用
  8. 正则语言引擎:一个简单LEX和YACC结合运用的实例
  9. grunt之watch续
  10. oop 第三次作业 文件读写