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的调用对象。
我前面有几篇文章是介绍jQ