jQuery AJAX 调用WCF服务实现的自动完成控件

代码下载：http://code.google.com/p/ajaxautocomplete/downloads/list

Auto Complete的jQuery控件。

首先是需要设计下我们的DIV最后应该显示成什么样子,我的CSS不咋地。瞎玩呢。样子如下：

首先是一个DIV，然后是添加一个ul和几个li tag:

<div id="nav"><ul><li><a>Text1 field1</a></li><li><a>Text1 field2</a></li><li><a>Text1 field3</a></li><li><a>Text1 field4</a></li><li><a>Text1 field5</a></li></ul></div> 

Nav的CSS样式：

Li下面的a标签为了让它有点动态效果，我让它的左右border在鼠标放上去时发生变化。

接下来是如何使用jQuery来创建一个上面设计出来的DIV,并把它的位置放到一个input标签下面。

首先是把CSS定义成字符串：

这里需要注意的是：我们需要用到一个函数来为每个控件添加Style：

 

 

     String.format =                                     function() {                                         var currentString = null;                                         if (arguments.length != 0) {                                             currentString = arguments[0];                                             for (var argumentIndex = 1; argumentIndex < arguments.length; argumentIndex++) {                                                 var modifiedString = new RegExp('//{' + (argumentIndex - 1) + '//}', 'gm');                                                 currentString = currentString.replace(modifiedString, arguments[argumentIndex]);                                             }                                         }   

下面是通过使用String.format函数和jQuery的一些方法来创建好DIV，并添加到body上。

当点击某条记录时应该把当前被点击的Li 的text赋值给text field 来显示：

最后是找到DIV应该在的位置并把它显示出来：

效果：

 完成了上面的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站点模板。

它自带jQuery已经是1.4.1版本了。。。。

然后创建一个jQueryWCFService.aspx页面。是以Site.Master作为母版的。

接下来就是创建一个AJAX-enabled WCF Service文件，它一会给我们提供Service。通过给它传输一个字符串，然后在服务器端查询，返回的结果作为autocomplete的列表。

创建好服务后，因为需要给WCF Service传参数，需要定义一个Uri模板。

所以这里创建一个IAutoCompleteService的接口。

里面先写个测试方法，通过给服务器传输一个值，然后服务器返回信息告诉你它收到了。呵呵。。

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显示出来。

我这里有设置个断点追踪客户端执行代码：