1 <link href="AutoLib/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
2 <script src="lib/jquery-1.4.1.min.js" type="text/javascript"></script>
3 <script src="AutoLib/jquery.autocomplete.min.js" type="text/javascript"></script>
4 <script type="text/javascript" src="lib/localdata.js"></script>
5
6 <script type="text/javascript">
7 $().ready(function () {
8 //静态填充
9 $("#TxtJsion").focus().autocomplete(emails, {
10 minChars: 0,
11 width: 310,
12 max: 0,
13 matchContains: true,
14 autoFill: false,
15 formatItem: function (row, i, max) {
16 //显示的值
17 return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
18 },
19 formatMatch: function (row, i, max) {
20 //查找匹配的值
21 return row.name + " " + row.to;
22 },
23 formatResult: function (row) {
24 //选中后的值
25 return row.to;
26 }
27 });
28
29 });//初始化结束
30
31 //动态填充
32 function AutoFillKey() {
33 var keyWords = $("#<%=TxtAuto.ClientID%>").val();
34
35 //改变绑定的内容
36 if (keyWords.length == 1 && keyWords != $("#TxtKey").val()) {
37 $("#TxtKey").val(keyWords);
38 $("#TxtAuto").unautocomplete();
39
40 $.ajax({
41 type: "POST",
42 url: "ServerData.ashx",
43 data: { "KW": keyWords },
44 dataType: "json",
45 timeout: 2000,
46 error: function (data) {
47 alert("请求失败：" + data.responseText);
48 },
49 success: function (data) {
50 AutoCompleteKey(data);
51 }
52 });
53
54 } //end if
55 }
56
57 function AutoCompleteKey(data) {
58 //填充开始
59 $("#<%=TxtAuto.ClientID%>").autocomplete(data, {
60 minChars: 0,
61 width: 640,
62 autoFill: false,
63 matchContains: true,
64 selectFirst: false,
65 scrollHeight: 220,
66
67 scroll: true,
68 formatItem: function (row, i, max) {
69 //显示的值
70 return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
71 },
72 formatMatch: function (row, i, max) {
73 //查找匹配的值
74 return row.name + " " + row.to;
75 },
76 formatResult: function (row) {
77 //选中后的值
78 return row.to;
79 }
80 });
81 //填充结束
82 }
83
84 </script>
85 </head>
86 <body>
87 <form id="form1" runat="server" method="post">
88 <div>
89 <p>静态填充<input type="text" id="TxtJsion" /></p>
90
91 <p>动态填充
92 <input type="text" id="TxtAuto" onkeyup="AutoFillKey();" runat="server" />
93 <input type="hidden" id="TxtKey" value="" runat="server" />
94 </p>
95 </div>
96 </form>
97 </body>
98 </html>
后台代码：
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.Script.Serialization;
6 using System.Text;
7 using System.Web.Services;
8
9 namespace AutocompleteWeb
10 {
11 /// <summary>
12 /// ServerData 的摘要说明
13 /// </summary>
14 [WebService(Namespace = ]
15 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
16 public class ServerData : IHttpHandler
17 {
18
19 public void ProcessRequest(HttpContext context)
20 {
21 //GET方式
22 //context.Response.ContentType = "text/plain";
23 //string keyword = context.Request.QueryString["KW"];
24 //if (keyword != null)
25 //{
26 // 通过JavaScriptSerializer对象的Serialize序列化为["value1","value2",...]的字符串
27 //JavaScriptSerializer serializer = new JavaScriptSerializer();
28 //string jsonString = serializer.Serialize(GetProvinceCitys(keyword));
29 //context.Response.Write(jsonString); // 返回客户端json格式数据
30 //}
31
32 //POST方式
33 context.Response.ContentType = "application/json";
34 string keyStr = "";
35 if (context.Request["KW"] != null)
36 {
37 keyStr = context.Request["KW"].ToString();
38 }
39 ResponseJsionStr(context, GetProvinceCitys(keyStr));
40 }
41
42
43 /// <summary>
44 /// qinjue 2011-09-21
45 /// 返回jsion
46 /// </summary>
47 private void ResponseJsionStr(HttpContext context, string strJsion)
48 {
49 context.Response.Clear();
50 context.Response.ClearContent();
51 context.Response.Cache.SetNoStore();
52 context.Response.ContentType = "application/json";
53 context.Response.ContentEncoding = System.Text.Encoding.UTF8;
54 context.Response.Write(strJsion);
55 context.Response.End();
56 }
57
58 public string GetProvinceCitys(string KW)
59 {
60 StringBuilder cytySB = new StringBuilder();
61 cytySB.Append("[");
62 cytySB.Append("{\"name\":\"AACCASF东城区\",\"to\":\"11001\"},");
63 cytySB.Append("{\"name\":\"AACSAWE西城区\",\"to\":\"11002\"},");
64 cytySB.Append("{\"name\":\"AACAER海淀区\",\"to\":\"11003\"}");
65 cytySB.Append("]");
66 return cytySB.ToString();
67 }
68
69 public bool IsReusable
70 {
71 get
72 {
73 return false;
74 }
75 }
76 }
77 }本回答被提问者和网友采纳
求助Jquery Autocomplete 如何动态加载数据,类似百度的搜索提示
1 2 3 4 5 6 7 $().ready(function () { 8 \/\/静态填充 9 $("#TxtJsion").focus().autocomplete(emails, { 10 minChars: 0,11 width: 310,12 max: 0,13 matchContains: true,14 autoFill: false,15 formatItem: function...
怎么在js实现类似百度的自动补全功能
type: "POST",url: mlog.variable.base+"\/admin\/post\/autocomplete?keyword=" + extractLast( request.term ) ,contentType: "application\/json; charset=utf-8",dataType: "json",success: function (data) { cache[ term ] = $.map(data, function(item){ return item.name });response(...
JQuery的Autocomplete 插件如何应用
1、首先打开Sublime Text软件，搭建好页面，然后引入样式库文件，如下图所示 2、接下来在script中添加jquery的脚本库文本，如下图所示，智能提示的相关功能都在jquery-ui.min.js文件中 3、然后在body标签中准备输入框，如下图所示，注意给输入框一个id属性，方便定位 4、界面都搭建好以后，就需要准备...
如何将变化的外部数据动态显示在网页上?
1，使用jquery的autocomplete方法，这种网上有很多资料 2，使用异步调用ajxa方法，当输入框变化就提交ajax请求，下面是我现在使用的一个例子：输入页面代码index.php <input type="text" name="tagid" id="tagid" style="width:140px;" value="<?php if(isset($sGetTag)) echo $sGetTag;?>"...
JQuery-UI 里的 Autocomplete 怎么处理获取到的数据
页面中当然要有一个输入框.复制代码 代码如下: Tags: 二. 使用本地数据 对于使用来说，基本的使用非常简单，提示的数据可以来自数组。通过参数对象的 source 属性设置数据源。复制代码 代码如下: (function () { var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","...
asp_net手写AJAX实现类似baidu的搜索提示,自动补全已实现,只要帮我实现...
.post("\/jQuery_AutoComplete\/AutoCompleteServlet",{word:wordText},function(data){ \/\/2-2-1 将DOM对象转换成jQuery对象 var jQueryObj = $(data);\/\/2-2-2 找到所有的word节点 var wordNodes = jQueryObj.find("word");\/\/2-2-3 遍历所有的word节点,取出单词内容,然后将单词内容填充到提示...
jquery的autocomplete插件点击滚动条会触发blur事件。火狐中不会,ie...
这个问题要解决其实也不难，通过以下步骤进行问题验证：1、在页面中开启调试模式，将断点设置到autocompete控件执行的js处；2、监测对象激活的事件；3、如果有blur事件被触发，是可以看到主对象的，然后分析下主对象的位置和触发条件即可定位问题。此问题出现跨浏览器，多是样式兼容问题导致的页面对象重合。
jquery autocomplete ajax oracle 怎么弄
像这种自动提示，不可能一次显示几十万条，别说几十万，上百条显示出来，你认为页面会是什么样？百度的提示最多也只显示10条而已，所以你在查询的时候取rownum<=10的就行了
求一个Jquery ASP.NET 实现自动补全效果!例子
是不是类似百度搜索效果:百度:jquery.autocomplete.js 原理，在前台通过jquery去服务器读取数据，后台生成对应的json格式的数据。网上例子很多
怎么做百度搜索的下拉框?
1、实现该功能需依赖jquery.js，jquery.autocomplete.js，先引入这两个js包，以及jquery.autocomplete.css样式文件，如图所示。2、该不全插件要结合input元素使用，也就是在input中进行搜索时，会达到自动提示补全的效果，在html文件中定义input元素，以下是部分代码截图，如图所示。3、那么使用autocomplete自动...
