代码下载:http://code.google.com/p/ajaxautocomplete/downloads/list
Auto Complete的jQuery控件。
首先是需要设计下我们的DIV最后应该显示成什么样子,我的CSS不咋地。瞎玩呢。样子如下:
![](http://hi.csdn.net/attachment/201004/17/0_1271471499wsDJ.gif)
首先是一个DIV,然后是添加一个ul和几个li tag:
Nav的CSS样式:
![](http://hi.csdn.net/attachment/201004/17/0_1271471503Yziz.gif)
Li下面的a标签为了让它有点动态效果,我让它的左右border在鼠标放上去时发生变化。
![](http://hi.csdn.net/attachment/201004/17/0_1271471507844D.gif)
接下来是如何使用jQuery来创建一个上面设计出来的DIV,并把它的位置放到一个input标签下面。
首先是把CSS定义成字符串:
这里需要注意的是:我们需要用到一个函数来为每个控件添加Style:
下面是通过使用String.format函数和jQuery的一些方法来创建好DIV,并添加到body上。
![](http://hi.csdn.net/attachment/201004/17/0_1271471516Ss7Q.gif)
当点击某条记录时应该把当前被点击的Li 的text赋值给text field 来显示:
![](http://hi.csdn.net/attachment/201004/17/0_1271471520UE8L.gif)
最后是找到DIV应该在的位置并把它显示出来:
![](http://hi.csdn.net/attachment/201004/17/0_127147153278LX.gif)
效果:
![](http://hi.csdn.net/attachment/201004/17/0_1271471537Rrfb.gif)
完成了上面的JavaScript的编写,下面是如何使用WCF Data Service来作为jQuery的AJAX的调用对象。
我前面有几篇文章是介绍jQuery AJAX 调用Web Service的。大家可以到这里看看:
http://blog.csdn.net/dujingjing1230/archive/2009/09/02/4512637.aspx
http://blog.csdn.net/dujingjing1230/archive/2009/08/28/4495008.aspx
我这里使用的VS2010正式版,刚发布没多久。先创建一个普通的Web站点模板。
![](http://hi.csdn.net/attachment/201004/17/0_127147154143Zy.gif)
它自带jQuery已经是1.4.1版本了。。。。
然后创建一个jQueryWCFService.aspx页面。是以Site.Master作为母版的。
接下来就是创建一个AJAX-enabled WCF Service文件,它一会给我们提供Service。通过给它传输一个字符串,然后在服务器端查询,返回的结果作为autocomplete的列表。
创建好服务后,因为需要给WCF Service传参数,需要定义一个Uri模板。
所以这里创建一个IAutoCompleteService的接口。
![](http://hi.csdn.net/attachment/201004/17/0_1271471548Qj2J.gif)
里面先写个测试方法,通过给服务器传输一个值,然后服务器返回信息告诉你它收到了。呵呵。。
WCF Service的代码:
public class AutoCompleteService : IAutoCompleteService
{
public string SendMessage(string Message)
{
return "I got your Message: " + Message;
}
}
客户端测试代码:
<script type="text/javascript">
$(document).ready(function () {
$("#getMs").click(function () {
$.ajax({
type: "GET",
url: "http://localhost:1420/AutoCompleteService.svc/SendMessage/" + $("#Ms").val(),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var result = data;
alert(result);
},
error: function () {
alert("Error");
}
});
});
});
</script>
<p><input id="Ms" type="text"/><button id="getMs" style="height:20px"></button></p>
通过给一个输入框赋值,然后点击Button,通过WCF Service把值传到服务器,然后再把返回的结果通过Alert显示出来。
我这里有设置个断点追踪客户端执行代码:
![](http://hi.csdn.net/attachment/201004/17/0_1271471567f8u7.gif)