最近在做的项目中,需要有让用户选择的项目进行检索数据,但是需要选择的项目太多,如果绑定到DropDownlist中那么就会很慢,而且项目太多了也不好查找,
这样就想到用JQuery的插件AutoComplete,但是这么一个插件官方的例子倒是很简单,但是真正加上自己的需求就不那么简单了。文章最后将给出插件的下载和插件的CSS
样式文件。
这里我用到了使用JSON来作为数据源,那么JSON的可以动态的加载,但是为了能保证效率,我这里先写了代码,然后将得到的JSON的字符串放到一个HTML中。然后通过AutoComplete的参数传进去。
代码如下:
1: string sqljson = "select t.logicalname,t.longname from speciality t";
2: DataTable tbjson = db.ExecuteDataSet(CommandType.Text, sqljson).Tables[0];
3: string jsonstring = this.DataTable2Json(tbjson);
4:
5: #region dataTable转换成Json格式
6: /// <summary>
7: /// dataTable转换成Json格式
8: /// </summary>
9: /// <param name="dt"></param>
10: /// <returns></returns>
11: public string DataTable2Json(DataTable dt) {
12: StringBuilder jsonBuilder = new StringBuilder();
13: jsonBuilder.Append("{\"");
14: jsonBuilder.Append(dt.TableName.Trim().ToString());
15: jsonBuilder.Append("\":[");
16: for (int i = 0; i < dt.Rows.Count; i++) {
17: jsonBuilder.Append("{");
18: for (int j = 0; j < dt.Columns.Count; j++) {
19: jsonBuilder.Append("\"");
20: jsonBuilder.Append(dt.Columns[j].ColumnName);
21: jsonBuilder.Append("\":\"");
22: jsonBuilder.Append(dt.Rows[i][j].ToString().Trim());
23: jsonBuilder.Append("\",");
24: }
25: jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
26: jsonBuilder.Append("},");
27: }
28: jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
29: jsonBuilder.Append("]");
30: jsonBuilder.Append("}");
31: return jsonBuilder.ToString();
32: }
33: #endregion
在生成JSON数据的时候碰到问题:一开始我直接在jsonstring处打上断点,然后捕捉到jsonstring的值,然后复制到txt文件中,然后修改为DeviceName.htm名字。
忘了,这里在生成的JSON后开头有一个tablename因为这个是在datatabel 转Json过程中加上的,需要删除掉这个表,当然也要删除掉最后的一个大括号。在上面的
Datatable2Json方法就是用来从DataTable 转JSON格式的。当然这也说明可以很容易的从DataSet转换为JSON数据。
做完了上面事情,然后开始在VS中调试代码,发现在IE中没有反应,但是在Google Chorme中有显示,但是显示的是乱码,无论怎么样的精简JSON数据(一开始数据量很大),
都显示乱码。然后就像是不是哪里出现问题。就调试类似官方的例子,直接把JSON数据写在JS代码中。代码如下:
1: <script type="text/javascript">
2:
3: var websites = [
4: "Google", "NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent",
5: "Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
6: ];
7:
8: $().ready(function() {
9: $("#txtTest").autocomplete(websites);
10: });
11: </script>
结果显示那是相当的正常。这就奇怪了。后来就想到直接让机器生成的JSON让它自己写入到TXT中吧。然后就在后台加了下面这段代码:
1: using (StreamWriter sw = File.AppendText(@"C:\123.txt")) {
2: sw.Write(jsonstring);
3: }
当然要在C盘目录下面新建一个123.txt文件。
这样再取的的JSON,然后去掉文件头部的TABLENAME和末尾的大括号,因为JSON是一个非常严谨的格式。这可能也是我用复制的形式无法实现的缘故吧。
通过这样的方式,成功的显示了。当然这里需要注意的是,自己需要修改一下官方下载下来的文档。因为官方的文档是不支持中文提示的。
具体的修改方式:
在下载下来的JQuery的源码中jquery.autocomplete.js第92行,将”keydown”替换为”keyup”,这样虽然能在IE中支持了中文提示,但是在FX
中还是会出错。然后修改源代码:
原jquery.autocomplete.js第199行,插入如下代码
1: .bind("input", function() {
2:
3: // YeanJay:在 firefox中提供中文智能提示的支持
4:
5: onChange(0, true);
6:
7: });
下面是实自动提示的JS的代码:
1: <script type="text/javascript">
2: /*==========用户自定义方法==========*/
3: //设备列表
4: var DeviceList;
5: //autocomplete选项 这里可以参考官方的 $("#txtTest").autocomplete(DeviceList, options);的方法
6: var options = {
7: minChars: 1,
8: max: 500,
9: 300,
10: dataType:'json',
11: matchContains: true,
12: formatItem: function(row, i, max) {
13: return i + "/" + max + ": \"" + row.LONGNAME;
14: },
15: formatMatch: function(row, i, max) {
16: return row.LONGNAME;
17: },
18: formatResult: function(row) {
19: return row.LONGNAME;
20: }
21: };
22: //autocomplete初始化函数
23: function initAutoComplete(data) {
24: DeviceList = data;
25: $("#txtTest").autocomplete(DeviceList, options);
26: $("#txtTest").result(function(event, data, formatted) {
27: $("#txtAnalyseObject").val(data.LOGICALNAME);
28: });
29: }
30:
31: /*==========加载时执行的语句==========*/
32: $(function() {
33: //加载设备名称数据, 并在回调函数中用返回的数据初始化autocomplete
34: $.getJSON("DeviceName.htm", null, initAutoComplete)
35: });
36: </script>
这里的data.LONGNAME是设备的名称,data.LOGICALNAME是设备的逻辑名称,因为在检索数据的过程中是用逻辑名称来检索的。所以将逻辑名称显示在另外一个
隐藏的Textbox中。
这样完成了自动提示的任务。方法就是这样,下面的文档只是为了个人存档,可能看到这个文章的你们无法正确的执行。因为里面还需要加载其他东西。如果需要了解的
可以留言。但是修改过的插件源码,和修改过的插件的CSS源码是可以使用的。
jquery.autocomplete.css, jquery.autocomplete.js, 设备名称JSON文件都在下面的压缩包中。
/Files/UpThinking/JQueryAutocompleteCSS.rar