再说AutoComplete自动补全之实现原理_jquery

一.简述
昨天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);
}

时间: 2024-11-08 22:34:16

再说AutoComplete自动补全之实现原理_jquery的相关文章

详解jQuery UI库中文本输入自动补全功能的用法_jquery

自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具.一般在 输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 一.调用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], }); 二.修改autocomplete()样式   由于autocomplete()方法是弹窗,然后鼠标悬停的样式.通过Firebug 想

实例讲解Android中的AutoCompleteTextView自动补全组件_Android

AutoCompleteTextView是一个具有自动补全功能的EditView,当用户输入数据后,AutoCompleteTextView就会将用户输入的数据与他自己的adapter中的数据对比,如果用户数据与adapter中的某条数据的开始部分完全匹配,那么adapter中的这条数据就会出现在下拉提示框中. 其常用属性定义如下 <AutoCompleteTextView android:id="@+id/mp002_top_place_input" android:layou

emac-Emacs 自动补全 auto-complete yasnippet 光标空白处不显示

问题描述 Emacs 自动补全 auto-complete yasnippet 光标空白处不显示 我在ubuntu中配置了emacs 的自动补全,现在碰到一个问题,在出现自动补全的时候,光标在有字符的地方会闪烁,在没有字符或者空白处无法看到光标,请问怎么让光标都在空白处也显示 下面的是我自动补全的配置 ;; yasnippet (add-to-list 'load-path "~/.emacs.d/yasnippet-0.6.1c") (require 'yasnippet);; no

[LeetCode] Design Search Autocomplete System 设计搜索自动补全系统

Design a search autocomplete system for a search engine. Users may input a sentence (at least one word and end with a special character '#'). For each character they type except '#', you need to return the top 3historical hot sentences that have pref

asp.net+ajax+sqlserver自动补全功能实现解析

 这篇文章主要介绍了asp.net + ajax + sqlserver 自动补全功能,需要的朋友可以参考下 代码下载    说明:数据库连接字符串在web.config文件中,为方便运行使用的是官方的Northwind数据库.    参考(向其作者致敬):    ² http://www.loveweb8.com/plus/demo.php?aid=57这个例子是html源码.利用jquery.autocomplete插件利用js实现了自动补全功能.由于我的需要是结合sqlserver数据库表

jquery-easyui文本框该如何自动补全,求教!

问题描述 easyui文本框该如何自动补全,求教! easyui文本框自动补全该怎么做???我看官方demo只有下拉框自动补全,求教 解决方案 Android开发之自动补全文本框jqeryUI 文本框自动补全[pyqt]文本框自动补全 解决方案二: 用combobox,textbox没有这个功能,你要添加autocomplete自己下载第三方的autocomplete导入然后给textbox绑定autocomplete 解决方案三: 介绍个插件给你codeCirror 用法管网有,我的博客上也有

bigautocomplete实现联想输入,自动补全

bigautocomplete是一款Jquery插件.用它实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置.   先看效果图:      上图是通过ajax请求服务器返回的数据.下面简单介绍如何使用.   一.如何使用:    引入jquery.bigautocomplete.js和jquery.bigautocomplete.css文件到你的页面中. 二.参数说明: $("xxxxx").bigAutocomplete({da

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.2 技巧:使用自动补全微件提示输入值

7.2 技巧:使用自动补全微件提示输入值 在一些网站上,你可以找到用于选择的下拉菜单,它们包含了极长的选项列表.在许多情况下,可以使用具有自动补全功能的输入框取代下拉式菜单来帮助用户.省去了滚动选择,用户只要输入目标选项的第一个字符,然后自动补全组件便可以完成剩下的事. 代码清单7-2提供了一个自动补全的例子,它使用一段称为"Lorem Ipsum"的文字来实现输入第一个字后的补全.这段文字起源于两千年前,但仍然使用在图形设计和排版行业(通常被称为"假文"或&quo

jQuery实现邮箱下拉列表自动补全功能_jquery

记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填写邮箱名字,出现下拉列表,自动补全邮箱 •点击上下按键,选取下拉列表邮箱 •按回车键,选中列表内容,隐藏下拉列表 •鼠标经过,下拉列表选项设置为高亮 •鼠标点击,选中下拉列表选项,隐藏下拉列表 HTML HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签. <ht