FineUI 官方论坛

标题: jquery autocomplete 如何实现key与value同时返回 [打印本页]

作者: liaofeifan 时间: 2014-2-28 08:27
标题: jquery autocomplete 如何实现key与value同时返回
jquery autocomplete 如何实现key与value同时返回。即key写入hidden控件，value在textbox控件显示。

作者: liaofeifan 时间: 2014-2-28 23:35
服务器端：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using EF.BLL;
using EF.DAL;

namespace EF.APP
{
/// <summary>
/// SearchTeachingClass 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。
   [System.Web.Script.Services.ScriptService]
public class SearchTeachingClassService : System.Web.Services.WebService
{

      [WebMethod]
      public string HelloWorld()
      {
         return "Hello World";
      }
      /// <summary>
      /// 主要是这个方法就是查询数据变为一个字符数组。
      /// </summary>
      /// <param name="q"></param>
      /// <returns></returns>
      [WebMethod]
      [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
      public string[] GetData(string q)
      {
         var s = q.Split('#')[0].ToUpper();
         var semesterID = Convert.ToInt32(q.Split('#')[1]);
         var data = new List<string>();
         var db = new EFSystemDataEntities();
         using (var teachingClassBll = new TeachingClassBll(db))
         {
            var query =
                  teachingClassBll.Filter(
                     c =>(c.SemesterID==semesterID)&&(c.ClassCode.Contains(s) || c.ClassName.Contains(s) || c.ClassNamePY.Contains(s))).Take(20);
            foreach (var teachingClass in query)
            {
                  data.Add(string.Format("{0}#{1}", teachingClass.ClassName, teachingClass.ID));
            }
         }
         return data.ToArray();
      }
}

}
客户端：
Ext.onReady(function () {
         var selid = $("#<%=HiddenFieldSemeter.ClientID %>").val();//为了给后台传入一个查询参数
         $("#<%=txtTeachingClass.ClientID %>").autocomplete({
            source: function (request, response) {
                  $.ajax({
                     url: '<%=ResolveUrl("~/ClassWorkLoad/SearchTeachingClassService.asmx/GetData") %>',
                     data: "{ 'q': '" + request.term + "#" + selid + "'}",
                     dataType: "json",
                     type: "POST",
                     contentType: "application/json; charset=utf-8",
                     success: function (data) {
                        response($.map(data.d, function (item) {
                              return {
                                 label: item.split('#')[0],
                                 val: item.split('#')[1]
                              }
                        }))
                     },
                     error: function (response) {
                        alert(response.responseText);
                     },
                     failure: function (response) {
                        alert(response.responseText);
                     }
                  });
            },
            select: function (e, i) {
                  $("#<%=HiddenFieldTeachinClass.ClientID %>").val(i.item.val);
         },
            minLength: 1,
            extraParams: { key: function() { return $("#<%=ddlCurrentSemester.ClientID %>").val(); } }
         });

自问自答了，供参考。其实我对返回json还有点没搞懂。

欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/)