Asp.net WCF和jQuery自动完成插件
下午好 我正面临一个难题，试图找出如何使用它，并使它使用我的WCF服务方法。WCF已正确发布并正常工作 自动完成插件的工作可以做些什么，或者有没有另一种聪明的方法使自动完成与WCF一起工作，并获得所选的Person.Id和Person.Name 以下是我目前一直在做的一些事情： WCF服务Asp.net WCF和jQuery自动完成插件,asp.net,jquery,wcf,autocomplete,Asp.net,Jquery,Wcf,Autocomplete,下午好 我正面临一个难题，试图找出如何使用它，并使它使用我的WCF服务方法。WCF已正确发布并正常工作 自动完成插件的工作可以做些什么，或者有没有另一种聪明的方法使自动完成与WCF一起工作，并获得所选的Person.Id和Person.Name 以下是我目前一直在做的一些事情： WCF服务 公共类人物{ 公共int Id{get；set；} 公共字符串名称{get；set；} 公共静态列表（）{ /*长查询被抑制为不烦人：）*/ } } [服务合同] 公共接口IChatService { [经营
公共类人物{
公共int Id{get；set；}
公共字符串名称{get；set；}
公共静态列表（）{
/*长查询被抑制为不烦人：）*/
}
}
[服务合同]
公共接口IChatService
{
[经营合同]
[WebInvoke（Method=“GET”，
UriTemplate=“GetPeople”，
BodyStyle=WebMessageBodyStyle.Bare，
ResponseFormat=WebMessageFormat.Json）]
列出GetPeople（）；
}
公共类MyService:IMyService
{
公共列表GetPeople（）
{
return Person.List（）；
}
}
。。。。
$（）.ready（函数（）{
$（'#'）。自动完成（“http://localhost/MyService/MyService.svc/GetPeople", {
宽度：260，
selectFirst:false
});
$（“#”）.result（函数（事件、数据、格式化）{
警报（“正常”）；
如果（数据）{
警报（$（this.parent（）.next（）.find（“input”）.val（数据[1]））；
}
});
});
列出SQL Server数据库中的所有人员（将来GetPeople方法将有一个字符串参数）
jqueryautocomplete插件看起来不错，但我还不确定需要哪些js文件才能在本地计算机上运行。现在我无法使它工作或调试它，即使是在显示警报（）时 我只是使用（我认为这是一个旧版本；它与jQuery 1.4.2一起工作）和WCF 3.5（还有一个版本已经过时）将其编码在一起。这是我如何做到的
WCF服务
使用系统；
使用System.Linq；
使用System.Collections.Generic；
使用System.ServiceModel；
使用System.ServiceModel.Web；
使用System.Runtime.Serialization；
名称空间Ionic.Samples.Webservices.\u 2010.11
{
[ServiceContract（Namespace=“urn:Ionic.Samples”）]
公共接口ICompletionService
{
[经营合同]
[WebInvoke（Method=“GET”，
RequestFormat=WebMessageFormat.Json，
ResponseFormat=WebMessageFormat.Json，
UriTemplate=“getcompletions/{fragment}”）]
列出GetCompletions（字符串片段）；
}
[ServiceBehavior（Name=“WcfJqueryAutoComplete”，
Namespace=“urn:Ionic.Samples”，
InstanceContextMode=InstanceContextMode.Single，//一个实例用于所有请求
IncludeExceptionDetailInFaults=true）]
公共类WcfJqueryAutoComplete:ICompletionService
{
所有候选人的私人名单；
公共WcfJqueryAutoComplete（）
{
所有候选人=新名单
{
“一月”、“二月”、“三月”、“四月”、“五月”、“六月”，
“七月”、“八月”、“九月”、“十月”、“十一月”，
“十二月”、“阴沉”、“偏航”、“打哈欠”、“好运”，
“套利”、“仲裁者”、“Arbor”、“Ardor”、“Ardent”，
“具体的”、“有意识的”、“紧张的”、“高级的”、“朋友的”，
“依赖”、“深化”、“深化”、“解除承诺”、“正确”、“现在”，
“知识”，“骑士”，“知道”，“内裤”，“哇”，“神圣”，
...
};
}
公共列表GetCompletions（字符串片段）
{
var frag=fragment.ToUpper（）；
//使用LINQ从内存列表中选择候选项。
//您可以将其替换为SQL查询。
var selection=来自所有候选中的候选
其中candidate.ToUpper（）.StartsWith（frag）
选择候选人；
返回新列表（选择）；
}
}
}
.svc文件
相关的WCF.config信息
Javascript逻辑
这很有效
ps：对于调试jQuery，我发现FF或IE8+中包含的调试器工具非常宝贵。在IE8中，按F12获取调试器控制台
此外，在开发时，我经常设置一个div，id=msgs，从javascript逻辑收集诊断信息。然后我使用这种函数在执行的不同阶段将信息放入其中
function addMessage(msg, clear){
if (clear !== null && clear) {
$('#msgs').html("");
}
$('#msgs').append("<p>" + msg + "</p>");
}
函数addMessage（消息，清除）{
if（清除！==null&&clear）{
$（'#msgs'）.html（“”）；
}
$（“#msgs”）。追加（“”+msg+””）；
}
Person类中的[DataConTract][DataMember]属性如何？完成。我看到WCF运行良好。我正在看一看，看看你的答案是什么。这里最有趣的是，上面的$（'#example'）.autocomplete（源代码：function（request，response）{$.ajax（{…
）从未被激发过。但是当我把$（'#example'）.autocomplete（myDataArray）
放进去时，它就起作用了。对不起，我不知道你的意思。什么东西从来没有被激发过？源代码嵌套的函数$.ajax（…
从未被解雇，但你的回答在某种程度上帮助了我做了另一件事。现在我在阅读了谷歌代码中的autocomplete插件文档后，让autocomplete开始工作。以下是我的工作示例：
....
<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>
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);
}
}
}
<%@ ServiceHost
Language="C#"
Debug="true"
Service="Ionic.Samples.Webservices._2010.Nov.WcfJqueryAutoComplete"
%>
<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>
<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>
function addMessage(msg, clear){
if (clear !== null && clear) {
$('#msgs').html("");
}
$('#msgs').append("<p>" + msg + "</p>");
}