JQuery 插件 AutoComplete完美征程

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

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

样式文件。

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

    代码如下：

string sqljson = "select t.logicalname,t.longname from speciality t";
DataTable tbjson = db.ExecuteDataSet(CommandType.Text, sqljson).Tables[0];
string jsonstring = this.DataTable2Json(tbjson);

 #region dataTable转换成Json格式
        /// <summary>
        /// dataTable转换成Json格式
        /// </summary>
        /// <param name="dt"></param>
        /// <returns></returns>
        public string DataTable2Json(DataTable dt) {
            StringBuilder jsonBuilder = new StringBuilder();
            jsonBuilder.Append("{\"");
            jsonBuilder.Append(dt.TableName.Trim().ToString());
            jsonBuilder.Append("\":[");
            for (int i = 0; i < dt.Rows.Count; i++) {
                jsonBuilder.Append("{");
                for (int j = 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("}");
            return jsonBuilder.ToString();
        }
        #endregion

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

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

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

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

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

  <script type="text/javascript">

        var websites = [
            "Google", "NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent",
            "Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
                ];

        $().ready(function() {
            $("#txtTest").autocomplete(websites);
        });
    </script>

    结果显示那是相当的正常。这就奇怪了。后来就想到直接让机器生成的JSON让它自己写入到TXT中吧。然后就在后台加了下面这段代码：

using (StreamWriter sw = File.AppendText(@"C:\123.txt")) {
               sw.Write(jsonstring);
           }

    当然要在C盘目录下面新建一个123.txt文件。

    这样再取的的JSON，然后去掉文件头部的TABLENAME和末尾的大括号，因为JSON是一个非常严谨的格式。这可能也是我用复制的形式无法实现的缘故吧。

    通过这样的方式，成功的显示了。当然这里需要注意的是，自己需要修改一下官方下载下来的文档。因为官方的文档是不支持中文提示的。

    具体的修改方式：

       在下载下来的JQuery的源码中jquery.autocomplete.js第92行，将”keydown”替换为”keyup”，这样虽然能在IE中支持了中文提示，但是在FX

中还是会出错。然后修改源代码：

      原jquery.autocomplete.js第199行，插入如下代码

.bind("input", function() {

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

 onChange(0, true);

  });

      下面是实自动提示的JS的代码：

    <script type="text/javascript">
        /*==========用户自定义方法==========*/
        //设备列表
        var DeviceList;
        //autocomplete选项   这里可以参考官方的  $("#txtTest").autocomplete(DeviceList, options);的方法
        var options = {
            minChars: 1,
            max: 500,
             300,
            dataType:'json',
            matchContains: true,
            formatItem: function(row, i, max) {
            return i + "/" + max + ": \"" + row.LONGNAME;
            },
            formatMatch: function(row, i, max) {
            return row.LONGNAME;
            },
            formatResult: function(row) {
            return row.LONGNAME;
            }
        };
        //autocomplete初始化函数
        function initAutoComplete(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>

   这里的data.LONGNAME是设备的名称，data.LOGICALNAME是设备的逻辑名称，因为在检索数据的过程中是用逻辑名称来检索的。所以将逻辑名称显示在另外一个

隐藏的Textbox中。

    这样完成了自动提示的任务。方法就是这样，下面的文档只是为了个人存档，可能看到这个文章的你们无法正确的执行。因为里面还需要加载其他东西。如果需要了解的

可以留言。但是修改过的插件源码，和修改过的插件的CSS源码是可以使用的。

    jquery.autocomplete.css,  jquery.autocomplete.js, 设备名称JSON文件都在下面的压缩包中。

    /Files/UpThinking/JQueryAutocompleteCSS.rar