从今天開始。我将和大家分享一下近期经手项目的优化经验。今天我们分享的内容是：自己主动匹配！

引言：

    输入框数据自己主动匹配大家应该非常熟悉，当我们在使用百度或google时，在搜索框中输入数据，就会得到对应提示，这给我们的搜索带来了非常大的方便，假如说我要搜索火车票订票官网。可是我不记得是全称是什么，12593？还是12596？，其实。我在搜索框中输入火车站就能够看到想要找的站点全称了，如图：

    如此有用的功能，当然要拿来用到我们自己的系统里，来看看怎么实现吧！

思路：

1.引用jquery-easyui封装好的包。导入到js和css文件。

2.异步获取数据库中数据，转换成Json格式。esayui自己主动匹配。

3.HTML代码实现；

实现：

1.引用jquery-easyui，导入js和css文件（下载地址），页面加入引用时注意顺序：

    <script  type="text/javascript" src="http://www.mamicode.com/js/jquery.easyui.min.js"></script>
    <script src="http://www.mamicode.com/js/Student.js" type="text/javascript"></script>
    <script src="http://www.mamicode.com/js/RobCourse.js" type="text/javascript"></script>
    <script src="http://www.mamicode.com/js/ajax.js" type="text/javascript"></script>
    <link href="http://www.mamicode.com/css/Student.css" rel="stylesheet" type="text/css" />
    <link type="text/css" href="http://www.mamicode.com/css/easyui.css" rel="stylesheet" />
    <link type="text/css" href="http://www.mamicode.com/css/demo.css" rel="stylesheet" />

2.Html代码

<div id="courseBlock" style="margin-left: 10px;">
                            <label for="txtCourse">选优先课：</label>
                            <%--<input type="text" id="txtCourse" style="width: 103px; height:22px;border-width:1px;border-bottom:none;background-color:white;" />--%>
                             <input id="txtCourse" name="txtCourse" class="easyui-combobox" 
                                 data-options="valueField:‘indexing‘,textField:‘coursename‘, method: ‘post‘,url:‘handler/AutoMatchingCourse.ashx?dropCourseCategoryValue=http://www.mamicode.com/&dropCollegeValue=&dropExistValue=‘" />
                            <input type="button" id="btnAddCourse" class="btnadd" value="http://www.mamicode.com/+"  />
                            
                        </div>

3.获取HTML页传过来的參数，并进行处理：

public class AutoParttenCourse : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        //实例化表格
        DataTable dt = new DataTable();
        //实例化当前选课类
        ChooseCourseBLL chooseCourse = new ChooseCourseBLL();
        //实例化參数实体类
        CollegeEntity enCollege = new CollegeEntity();
        CourseCategoryEntity enCourseCategory = new CourseCategoryEntity();
        CurrentTeachCourseEntity enCurrentTeachCourse = new CurrentTeachCourseEntity();

        string dropCourseCategoryValue = http://www.mamicode.com/context.Request["dropCourseCategoryValue"];
        string dropCollegeValue = http://www.mamicode.com/context.Request["dropCollegeValue"];
        string dropExistValue = http://www.mamicode.com/context.Request["dropExistValue"];

        if (dropCourseCategoryValue =http://www.mamicode.com/= null) dropCourseCategoryValue ="";
        if (dropCollegeValue =http://www.mamicode.com/= null) dropCollegeValue ="";
        if (dropExistValue =http://www.mamicode.com/= null) dropExistValue ="";

        //获得查询条件
        enCourseCategory.CourseCategoryID = dropCourseCategoryValue;
        enCollege.CollegeID = dropCollegeValue;
        enCurrentTeachCourse.IsEmpty = dropExistValue;
        //获得数据
        dt = chooseCourse.QueryCurrentTeachCourseByGroup(enCollege, enCourseCategory, enCurrentTeachCourse);


        string res = DataTable2JsonCom(dt);
        context.Response.Write(res);

    }
}

    #region DataSet转换成Json格式
    /// <summary>
    /// DataSet转换成Json格式    
    /// </summary>    
    /// <param name="ds">DataSet</param>   
    /// <returns></returns>    
    public static string Dataset2JsonCom(DataSet ds, int total = -1)
    {
        StringBuilder json = new StringBuilder();

        foreach (DataTable dt in ds.Tables)
        {
            //json.Append("[");  
            json.Append(DataTable2JsonCom(dt));
            //json.Append("]");  
            //json.Append("");  
        } return json.ToString();
    }
    #endregion
    
    #region dataTable转换成Json格式
    /// <summary>    
    /// dataTable转换成Json格式    
    /// </summary>    
    /// <param name="dt"></param>    
    /// <returns></returns>    
    public static string DataTable2JsonCom(DataTable dt, int pid = -1)
    {
        StringBuilder jsonBuilder = new StringBuilder();
        jsonBuilder.Append("[");
        for (int i = 0; i < dt.Rows.Count; i++)
        {

            jsonBuilder.Append("{");
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                int id = pid;
                jsonBuilder.Append("\"");
                dt.Columns[j].ColumnName = dt.Columns[j].ColumnName.ToLower();
                jsonBuilder.Append(dt.Columns[j].ColumnName);
                jsonBuilder.Append("\":\"" + dt.Rows[i][j].ToString() + "\",");

            }

            if (dt.Columns.Count > 0)
            {
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            }
            jsonBuilder.Append("},");
        }
        if (dt.Rows.Count > 0)
        {
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
        }
        jsonBuilder.Append("]");
        return jsonBuilder.ToString();
    }
    #endregion dataTable转换成Json格式

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

效果：

总结：

    从用户角度出发，以用户为主，越靠近用户的使用习惯。软件亲和力越高，开发的软件越受欢迎！