jquery.autocomplete调用asp.net的WebService完美实现类似于淘宝自动完成的效果
在实际使用中，感觉淘宝搜索的自动完成功能做的很人性化，有内容提示还有记录显示。如下图：
看见如此效果，心的砰砰砰的直跳。于是自己也开始学着实现这种效果。以下是自己做好后的效果。如图：
废话不多说，直接上教程：
开发环境：vs2005，XP系统，ie6 浏览器（为了向后支持，所以没有用高版本ie浏览器，用的是纯净的ie6）、火狐浏览器3.6.6
第三方文件：
json2.js 下载地址：http://www.json.org/json2.js 中文官网：http://www.json.org/json-zh.html
（如果你在后台cs文件里，手动拼写JSON格式字符串，可以不下载此dll。建议下载使用）
Jayrock.Json.dll 下载地址：http://download.berlios.de/jayrock/jayrock-0.9.8316-bin.zip
官方网站：http://jayrock.berlios.de/
参考资料：http://msdn.microsoft.com/zh-cn/library/bb299886.aspx
jquery-1.4.1.js 这里就不附下载地址了
jquery.autocomplete.js
jquery.autocomplete.css 下载地址：http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip
官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete
下载完jquery.autocomplete.js后，还不能立即开始做程序。我们需要对jquery.autocomplete.js源文件有几处地方进行修改。
为了给大家省事，现在附上我修改后的jquery.autocomplete.js文件。下载文件
第一处：大约在200行 （修改后，可以支持在火狐浏览器中使用中文输入）
源代码：
}).bind( "unautocomplete", function () {
select.unbind();
$input.unbind();
$(input.form).unbind( ".autocomplete" );
});
修改后代码：
}).bind( "unautocomplete" , function () {
select.unbind();
$input.unbind();
$(input.form).unbind( ".autocomplete" );
}).bind( "input" , function () {
onChange( 0 , true );
});
第二处：大约在源代码361行
源代码：
源代码
$.ajax({
// try to leverage ajaxQueue plugin to abort previous requests
mode: "abort" ,
// limit abortion to this input
port: "autocomplete" + input.name,
dataType: options.dataType,
url: options.url,
data: $.extend({
q: lastWord(term),
limit: options.max
}, extraParams),
success: function (data) {
var parsed = options.parse && options.parse(data) || parse(data);
cache.add(term, parsed);
success(term, parsed);
}});
修改后代码：
修改后代码
$.ajax({
// try to leverage ajaxQueue plugin to abort previous requestsmode: "abort" ,
// limit abortion to this input
port: "autocomplete" + input.name,
type: "POST" , //使用POST方式向webservice提交
contentType: "application/json;charset=utf-8" , //提交数据格式为json
dataType: "json" , //返回数据格式json格式的字符串
url: options.url, //提交地址
/*这里使用json2.js里的JSON.stringify()方法，把json对象转换成字符串
如果不进行转换提交会报错*/
data:JSON.stringify($.extend({
q: lastWord(term), //这里指定了参数‘q’，则webservice方法里的参数名必须为'q'
limit: options.max //最大返回条数，webservice方法里可以无此参数
},extraParams)),
success: function (data) {
var parsed = options.parse && options.parse(data) || parse(data);
cache.add(term, parsed);
success(term, parsed);
},
error: function (x, textStatus, errorThrown) {
alert( "Ajax调用错误：" + x.responseText);
}});
第三处：大约在源代码388行
源代码：
源代码
function parse(data) {
var parsed = [];
var rows = data.split( "\n" );
for ( var i = 0 ; i < rows.length; i ++ ) {
var row = $.trim(rows[i]);
if (row) {
row = row.split( "|" );
parsed[parsed.length] = {
data: row,
value: row[ 0 ],
result: options.formatResult && options.formatResult(row, row[ 0 ]) || row[ 0 ]
};
}
}
return parsed;
};
修改后代码：
修改后代码
function parse(data) {
var parsed = [];
// 经过修改后的代码返回data是JSON格式的字符串
var jsons = eval( "(" + data + ")" ); // 返回的数据转换成JSON对象
for ( var i = 0 ; i < jsons.length; i ++ ) {
var json = jsons[i];
if (json) {
/* val只保存第一列值
当页面选中提示项后，自动把此值填入到文本框中 */
var val;
for ( var key in json){ // 由于不知道JSON对象的key值，只能循环读取
val = json[key]; break ;
}
parsed[parsed.length] = {
data: json,
value: val,
result: options.formatResult && options.formatResult(json, val) || val
};
}
}
return parsed;
};
修改完js文件后便可开工了。。下面上传页面代码，我做的范例里使用母版页，所以大家看起来有些别捏。请大家多多包含。
aspx代码：
页面代码
<% @ Page Language = " C# " MasterPageFile = " ~/MasterPage.master " AutoEventWireup = " true " CodeFile = " Default.aspx.cs " Inherits = " jquery_autocomplete_Default " Title = " Untitled Page " %>
< asp:Content ID = " Content1 " ContentPlaceHolderID = " HeadContent " Runat = " Server " >
< link rel = " stylesheet " href = " css/jquery.autocomplete.css " type = " text/css " />
< script type = " text/javascript " src = " http://www.cnblogs.com/js/jquery-1.4.1.js " ></ script >
< script type = " text/javascript " src = " js/jquery.autocomplete.js " ></ script >
< script type = " text/javascript " src = " js/json2.js " ></ script >
< script type = " text/javascript " >
$().ready(function() {
$( " #<%=_txtUserName.ClientID %> " ).focus().autocomplete(
' <%=ResolveClientUrl("~/WebService.asmx/HelloWorld") %> ' ,
{
minChars: 1 ,
autoFill: false ,
width: " 152px " ,
scroll: false ,
formatItem: function(result,i,max){
// 这里返回的result为一个已封装好的JSON对象
// i为第几条数据，从1开始；max为共多少条数据
// 返回参数里也可以只有一个参数result
var item = " <table id='auto " + i + " ' style='width:100%;'><tr><td align='left'> "
+ result.uname + " </td><td align='right' style='color:green;'> "
+ i + " </td></tr></table> " ;
return item;
}
}
);
});
</ script >
</ asp:Content >
< asp:Content ID = " Content2 " ContentPlaceHolderID = " ContentPlaceHolder1 " Runat = " Server " >
< asp:TextBox ID = " _txtUserName " runat = " server " Width = " 150px " BorderWidth = " 1px " ></ asp:TextBox >
</ asp:Content >
webservice代码：
WebService代码
using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using TestBLL;
using TestModel;
using Jayrock.Json.Conversion;
using System.Text;
/// <summary>
/// WebService 的摘要说明
/// </summary>
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
public WebService()
{
// 如果使用设计的组件，请取消注释以下行
// InitializeComponent();
}
[WebMethod]
public string HelloWorld( string q)
{
string str = "" ;
DataTable table = new CommonBLL().ExecuteDataSet( " select UserName,CONVERT(varchar(12),Birthday,111) Birthday from [User] where UserName like '% " + q + " %' " ).Tables[ 0 ];
Jayrock.Json.JsonArray jsonList = new Jayrock.Json.JsonArray();
Jayrock.Json.JsonObject json;
foreach (DataRow row in table.Rows)
{
json = new Jayrock.Json.JsonObject();
json.Accumulate( " uname " , row[ " UserName " ]);
json.Accumulate( " day " , row[ " Birthday " ]);
jsonList.Add(json);
}
str = jsonList.ToString();
return str;
}
}
注意：切忌要在配置文件中 <system.web>节点下加入如下配置,否则会报因URL意外地以”/…”结束的错误
<system.web>< webServices >
< protocols >
< add name ="HttpPost" />
< add name ="HttpGet" />
</ protocols ></ webServices ></ system.web >
如果此篇文章对你有帮助，麻烦您请顶下。您的支持就是我最大的动力！！