您的位置：首页 > Web前端 > JQuery

JQuery 插件 AutoComplete完美征程

2009-12-01 21:03 357 查看

最近在做的项目中，需要有让用户选择的项目进行检索数据，但是需要选择的项目太多，如果绑定到DropDownlist中那么就会很慢，而且项目太多了也不好查找，

这样就想到用JQuery的插件AutoComplete,但是这么一个插件官方的例子倒是很简单，但是真正加上自己的需求就不那么简单了。文章最后将给出插件的下载和插件的CSS

样式文件。

这里我用到了使用JSON来作为数据源，那么JSON的可以动态的加载，但是为了能保证效率，我这里先写了代码，然后将得到的JSON的字符串放到一个HTML中。然后通过AutoComplete的参数传进去。

代码如下：

stringsqljson="selectt.logicalname,t.longnamefromspecialityt";

DataTabletbjson=db.ExecuteDataSet(CommandType.Text,sqljson).Tables[0];

stringjsonstring=this.DataTable2Json(tbjson);

#regiondataTable转换成Json格式

///<summary>

///dataTable转换成Json格式

///</summary>

///<paramname="dt"></param>

///<returns></returns>

publicstringDataTable2Json(DataTabledt){

StringBuilderjsonBuilder=newStringBuilder();

jsonBuilder.Append("{\"");

jsonBuilder.Append(dt.TableName.Trim().ToString());

jsonBuilder.Append("\":[");

for(inti=0;i<dt.Rows.Count;i++){

jsonBuilder.Append("{");

for(intj=0;j<dt.Columns.Count;j++){

jsonBuilder.Append("\"");

jsonBuilder.Append(dt.Columns[j].ColumnName);

jsonBuilder.Append("\":\"");

jsonBuilder.Append(dt.Rows[i][j].ToString().Trim());

jsonBuilder.Append("\",");

jsonBuilder.Remove(jsonBuilder.Length-1,1);

jsonBuilder.Append("},");

jsonBuilder.Remove(jsonBuilder.Length-1,1);

jsonBuilder.Append("]");

jsonBuilder.Append("}");

returnjsonBuilder.ToString();

#endregion

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

在生成JSON数据的时候碰到问题：一开始我直接在jsonstring处打上断点，然后捕捉到jsonstring的值，然后复制到txt文件中，然后修改为DeviceName.htm名字。

忘了，这里在生成的JSON后开头有一个tablename因为这个是在datatabel转Json过程中加上的，需要删除掉这个表，当然也要删除掉最后的一个大括号。在上面的

Datatable2Json方法就是用来从DataTable转JSON格式的。当然这也说明可以很容易的从DataSet转换为JSON数据。

做完了上面事情，然后开始在VS中调试代码，发现在IE中没有反应，但是在GoogleChorme中有显示，但是显示的是乱码，无论怎么样的精简JSON数据（一开始数据量很大），

都显示乱码。然后就像是不是哪里出现问题。就调试类似官方的例子，直接把JSON数据写在JS代码中。代码如下：

<scripttype="text/javascript">

varwebsites=[

"Google","NetEase","Sohu","Sina","Sogou","Baidu","Tencent",

"Taobao","Tom","Yahoo","JavaEye","Csdn","Alipay"

];

$().ready(function(){

$("#txtTest").autocomplete(websites);

});

</script>

using(StreamWritersw=File.AppendText(@"C:\123.txt")){

sw.Write(jsonstring);

.bind("input",function(){

//YeanJay:在firefox中提供中文智能提示的支持

onChange(0,true);

});

<scripttype="text/javascript">

/*==========用户自定义方法==========*/

//设备列表

varDeviceList;

//autocomplete选项这里可以参考官方的$("#txtTest").autocomplete(DeviceList,options);的方法

varoptions={

minChars:1,

max:500,

width:300,

dataType:'json',

matchContains:true,

formatItem:function(row,i,max){

returni+"/"+max+":\""+row.LONGNAME;

},

formatMatch:function(row,i,max){

returnrow.LONGNAME;

},

formatResult:function(row){

returnrow.LONGNAME;

};

//autocomplete初始化函数

functioninitAutoComplete(data){

DeviceList=data;

$("#txtTest").autocomplete(DeviceList,options);

$("#txtTest").result(function(event,data,formatted){

$("#txtAnalyseObject").val(data.LOGICALNAME);

});

/*==========加载时执行的语句==========*/

$(function(){

//加载设备名称数据,并在回调函数中用返回的数据初始化autocomplete

$.getJSON("DeviceName.htm",null,initAutoComplete)

});

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航