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>
如果此篇文章对你有帮助，麻烦您请顶下。您的支持就是我最大的动力！！
