求助Jquery Autocomplete 如何动态加载数据，类似百度的搜索提示

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

Mr朱由榔
推荐于2016-01-01 · TA获得超过2.9万个赞

知道大有可为答主

回答量：1.5万

采纳率：92%

帮助的人：7977万

我也去答题访问个人页

关注

展开全部

自己解决了，前台代码：
<link href="AutoLib/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
   <script src="lib/jquery-1.4.1.min.js" type="text/javascript"></script>   
   <script src="AutoLib/jquery.autocomplete.min.js" type="text/javascript"></script>
   <script type="text/javascript" src="lib/localdata.js"></script>
   
   <script type="text/javascript">
       $().ready(function () {
           //静态填充
           $("#TxtJsion").focus().autocomplete(emails, {
               minChars: 0,
               width: 310,
               max: 0,
               matchContains: true,
               autoFill: false,
               formatItem: function (row, i, max) {
                   //显示的值
                   return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
               },
               formatMatch: function (row, i, max) {
                   //查找匹配的值
                   return row.name + " " + row.to;
               },
               formatResult: function (row) {
                   //选中后的值
                   return row.to;
               }
           });

       });//初始化结束

       //动态填充
       function AutoFillKey() {
           var keyWords = $("#<%=TxtAuto.ClientID%>").val();

           //改变绑定的内容 
           if (keyWords.length == 1 && keyWords != $("#TxtKey").val()) {
               $("#TxtKey").val(keyWords);
               $("#TxtAuto").unautocomplete();

               $.ajax({
                   type: "POST",
                   url: "ServerData.ashx",
                   data: { "KW": keyWords },
                   dataType: "json",
                   timeout: 2000,
                   error: function (data) {
                       alert("请求失败：" + data.responseText);                       
                   },
                   success: function (data) {                       
                       AutoCompleteKey(data);
                   }
               });

           } //end if
       }

       function AutoCompleteKey(data) {
           //填充开始
           $("#<%=TxtAuto.ClientID%>").autocomplete(data, {
               minChars: 0,
               width: 640,
               autoFill: false,
               matchContains: true,
               selectFirst: false,
               scrollHeight: 220,
               
               scroll: true,
               formatItem: function (row, i, max) {
                   //显示的值
                   return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
               },
               formatMatch: function (row, i, max) {
                   //查找匹配的值
                   return row.name + " " + row.to;
               },
               formatResult: function (row) {
                   //选中后的值
                   return row.to;
               }
           });
           //填充结束
       }

   </script>
</head>
<body>
   <form id="form1" runat="server" method="post">
   <div>       
       <p>静态填充<input type="text" id="TxtJsion" /></p>

       <p>动态填充
               <input type="text" id="TxtAuto" onkeyup="AutoFillKey();" runat="server" />            
               <input type="hidden" id="TxtKey" value="" runat="server" />
           </p>
   </div>
   </form>
</body>
</html>
后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Text;
using System.Web.Services;

namespace AutocompleteWeb
{
   /// <summary>
   /// ServerData 的摘要说明
   /// </summary>
   [WebService(Namespace = ]
   [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
   public class ServerData : IHttpHandler
   {

       public void ProcessRequest(HttpContext context)
       {
           //GET方式
           //context.Response.ContentType = "text/plain";           
           //string keyword = context.Request.QueryString["KW"];
           //if (keyword != null)
           //{
           // 通过JavaScriptSerializer对象的Serialize序列化为["value1","value2",...]的字符串 
           //JavaScriptSerializer serializer = new JavaScriptSerializer(); 
           //string jsonString = serializer.Serialize(GetProvinceCitys(keyword));
           //context.Response.Write(jsonString); // 返回客户端json格式数据
          //}

           //POST方式
           context.Response.ContentType = "application/json";
           string keyStr = "";
           if (context.Request["KW"] != null)
           {
               keyStr = context.Request["KW"].ToString();
           }
           ResponseJsionStr(context, GetProvinceCitys(keyStr));
       }


       /// <summary>
       /// qinjue 2011-09-21
       /// 返回jsion
       /// </summary>
       private void ResponseJsionStr(HttpContext context, string strJsion)
       {
           context.Response.Clear();
           context.Response.ClearContent();
           context.Response.Cache.SetNoStore();
           context.Response.ContentType = "application/json";
           context.Response.ContentEncoding = System.Text.Encoding.UTF8;
           context.Response.Write(strJsion);
           context.Response.End();
       }

       public string GetProvinceCitys(string KW)
       {
           StringBuilder cytySB = new StringBuilder();
           cytySB.Append("[");
           cytySB.Append("{\"name\":\"AACCASF东城区\",\"to\":\"11001\"},");
           cytySB.Append("{\"name\":\"AACSAWE西城区\",\"to\":\"11002\"},");
           cytySB.Append("{\"name\":\"AACAER海淀区\",\"to\":\"11003\"}");
           cytySB.Append("]");
           return cytySB.ToString();
       }

       public bool IsReusable
       {
           get
           {
               return false;
           }
       }
   }
}


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

求助Jquery Autocomplete 如何动态加载数据，类似百度的搜索提示

其他类似问题

为你推荐：