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
相关文档:
<html>
<head>
<title>jQuery Ajax 实例演示</title>
</head>
<script language="javascript" src="../lib/jquery.js"></script>
<script language="javascript">
$(document).ready(function ()
{
$('#send_ajax').click(function (){
  ......
Client端
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="javascript">
var XmlHttp=new ActiveXObject("Microsoft.XMLhttp");
function sendAJAX()
{
&nb ......
jQuery 是什么?
请访问 Ajax 技术资源中心,这是有关 Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
jQuery 由 John Resig 创建于 2006 年初,对于任何使用 JavaScript 代码的程序员来说,它是一个非常有用的 JavaScript 库。无论您是刚刚接触 Java ......
在上一篇文章中,我们讨论了如何通过javascript从一个远程XML文件中取得数据。在这篇文章中,我们将学会怎样对数据作更复杂的处理。作为一个示例,我们会准备一组XML数据,将数据分割成独立的片断并以不同的方式展示这些片断(取决于它们是如何被标识的)。
这篇文章是建立在上一篇文章中构造的示例代码的基础之上 ......
Ajax表单提交数据出现乱码和解决办法
//要传递的参数
var queryString = "firstName=" + firstName + "&lastName=" + lastName
&nbs ......