Question

下午好。

我遇到了麻烦，试图弄清楚如何使用这个autocomplete plugin并让它使用我的WCF服务方法。 WCF已正确发布并正常工作。

可以对自动完成插件工作做些什么，或者是否有另一种聪明的方法可以使自动完成功能与WCF一起工作并获得选择的Person.Id和Person.Name？

我现在一直在做的一些事情：

WCF服务

public class Person {
    public int Id {get;set;}
    public string Name {get;set;}
    public static List<Person> List(){
      /*long query supressed to no be annoying :) */
    }
}

[ServiceContract]
public interface IChatService
{
    [OperationContract]
    [WebInvoke(Method = "GET", 
     UriTemplate = "GetPeople", 
     BodyStyle = WebMessageBodyStyle.Bare, 
     ResponseFormat = WebMessageFormat.Json)]
    List<Person> GetPeople();
}

public class MyService : IMyService
{
    public List<Person> GetPeople()
    {
        return Person.List();
    }
}

现在是aspx页面：

....
<head>
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/autocomplete/lib/jquery.js"></script>
<script type='text/javascript' src='http://view.jquery.com/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='http://view.jquery.com/trunk/plugins/autocomplete/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='http://view.jquery.com/trunk/plugins/autocomplete/lib/thickbox-compressed.js'></script>
<script type='text/javascript' src='http://view.jquery.com/trunk/plugins/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="http://view.jquery.com/trunk/plugins/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="http://view.jquery.com/trunk/plugins/lib/thickbox.css" />

<script>
    $().ready(function () {
        $('#<%=peopleNames.ClientID%>').autocomplete("http://localhost/MyService/MyService.svc/GetPeople", {
            width: 260,
            selectFirst: false
        });
        $("#<%=peopleNames.ClientID%>").result(function (event, data, formatted) {
            alert('ok');
            if (data) {
                alert($(this).parent().next().find("input").val(data[1]));
            }
        });
  });

</script>
</head>
<body>
<form runat="server">
<asp:TextBox ID="peopleNames" runat="server" MaxLength="500"></asp:TextBox>
</form>
</body>
</html>

仅仅为了测试目的，我们的想法是让web用户输入一个名字，jQuery会调用WCF服务http://localhost/MyService/GetPeople来列出SQL Server数据库中的所有人（将来的GetPeople方法将有一个字符串参数）。

jquery 自动完成插件似乎很好，但我不确定我需要哪些js文件才能使它在我的本地计算机上运行。现在我无法使其工作或调试它，即使它显示警报（）;

Answer 1

我只是使用the autocomplete from jQuery UI v1.8rc3（我认为这是一个旧版本;它适用于jQuery 1.4.2）和WCF 3.5（也是一个转换为过时版本）一起编码。这是我如何做到的。

WCF服务

using System;
using System.Linq;
using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Runtime.Serialization;

namespace Ionic.Samples.Webservices._2010.Nov
{
    [ServiceContract(Namespace="urn:Ionic.Samples" )]
    public interface ICompletionService
    {
        [OperationContract]
        [WebInvoke(Method = "GET",
                   RequestFormat=WebMessageFormat.Json,
                   ResponseFormat = WebMessageFormat.Json,
                   UriTemplate = "getcompletions/{fragment}")]
        List<String> GetCompletions(string fragment);
    }


    [ServiceBehavior(Name="WcfJqueryAutoComplete",  
                     Namespace="urn:Ionic.Samples",
                     InstanceContextMode=InstanceContextMode.Single,    // one instance for all requests
                     IncludeExceptionDetailInFaults=true)]

    public class WcfJqueryAutoComplete : ICompletionService
    {
        private List<String> allCandidates;

        public WcfJqueryAutoComplete()
        {
            allCandidates = new List<String>
                {
          "January", "February", "March", "April", "May", "June",
          "July", "August", "September", "October", "November",
          "December", "Yammer", "Yaw", "Yawn", "Auspiscious",
          "Arbitrage", "Arbiter", "Arbor", "Ardor", "Ardent",
          "Concrete", "Conscious", "Uptight", "Uplevel", "Friend",
          "Depend", "Deepend", "Deepen", "Decommit", "Right", "Now",
          "Knowledge", "Knight", "Know", "Knickers", "Wow", "Holy",
           ...
                };
        }

        public List<String> GetCompletions(String fragment)
        {
            var frag = fragment.ToUpper();
            // use LINQ to select candidates from the in-memory list.
            // You could replace this with a SQL query.
            var selection = from candidate in allCandidates
                where candidate.ToUpper().StartsWith(frag)
                select candidate;

            return new List<String>(selection);
        }
    }
}

.svc文件

<%@ ServiceHost
Language="C#"
Debug="true"
Service="Ionic.Samples.Webservices._2010.Nov.WcfJqueryAutoComplete"
%>

相关的WCF .config信息

<system.serviceModel>

  <behaviors>
    <endpointBehaviors>
      <behavior name="JsonServiceEndpointBehavior">
        <webHttp />
      </behavior>
    </endpointBehaviors>
  </behaviors>


  <services>
    <service
        name="Ionic.Samples.Webservices._2010.Nov.WcfJqueryAutoComplete"
        >
      <endpoint
         address               = ""
         binding               = "webHttpBinding"
         contract              = "Ionic.Samples.Webservices._2010.Nov.ICompletionService"
         behaviorConfiguration = "JsonServiceEndpointBehavior"
         bindingNamespace      = "urn:Ionic.Samples"
         />

    </service>
  </services>
</system.serviceModel>

Javascript逻辑

<script type="text/javascript">
  <!--

  var ajaxUrlBase1 = "/services/WcfJqueryAutoComplete.svc/";

  $(document).ready(function() {

      $("#input1").autocomplete({
          // The source option can be an array of terms.  In this case, if
          // the typed characters appear in any position in a term, then the
          // term is included in the autocomplete list.
          // The source option can also be a function that performs the search,
          // and calls a response function with the matched entries.
          source: function(req, responseFn) {
              $.ajax({
                  url     : ajaxUrlBase1 + "getcompletions/" + req.term,
                  cache   : false,
                  type    : "GET", // http method
                  dataType: "json",
                  error   : function(XMLHttpRequest,status,error){
                      alert("Error p1 s(" + status + ") e(" + error + ")");
                  },

                  success : function(msg, arg2, xhr){
                      try {
                        if (msg !== null) {
                          responseFn(msg);
                        } else {
                          alert("msg is null");
                        }
                      }
                      catch(e) {
                        alert("exception: " + e);
                      }
                  }
              });
          },

          select: function(value, data){
            // whatever you like here
          }
      });
  });

  -->
</script>

这很好用。

ps：为了调试jQuery，我发现FF或IE8 +中包含的调试工具是非常宝贵的。在IE8中按F12以获取调试器控制台。

另外，在开发时我经常设置一个id = msgs的div来从javascript逻辑中收集诊断信息。然后我使用这种函数在不同的执行阶段将信息放入其中。

function addMessage(msg, clear){
    if (clear !== null && clear) {
      $('#msgs').html("");
    }
    $('#msgs').append("<p>" + msg + "</p>");
}

WCF和jQuery自动完成插件

1 个答案: