自己做的autocomplete控件

功能简介：

1、普通text input，通过$("#Text1").KingAutoSelect(settings, DropDownColumns, "/CommonPage/getUserList.ashx")即可控件化；

2、支持键盘上、下键选择，回车即可选中相应数据，其中“值“存放于控件的Attributes中，可通过$("#Text1").attr("ItemValue")获取；

3、支持鼠标选择；

4、自定义扩展接口，onSelect(Item)，其中item是当前选中行”tr”对象

 

获取值示例：

 

$("#Button1").click(function () {
                alert("文本：" + $("#Text1").val()+"\r\n值："+$("#Text1").attr("ItemValue"));
                
            });

 

调用示例（一共3步）：

function getData() {
    //第一步，做好控件的基本设置
            var settings = {
            isShowTitle: true,                 //是否显示表头  
            DropDownHeight: "220px",           //下拉单的高  
            DropDownWidth: "460px",            //下拉单的宽  
            TextColumn: "姓名",                //显示的文本               
            ValueColumn: "所在",                //传递的值  
            onSelect: function (item) {        //选中后的拓展接口，可自行编写逻辑代码，如不需定义，则可不写此行代码
                alert("选中行的第二列值为："+item.children()[1].innerText)
            }
  //第二步，设置下拉单的列（对象数组类型），可根据自己需要定义N个列。每个列有3个属性，具体见下方            
	    var DropDownColumns = new Array();//下拉菜单列
            var o0 = new Object();
            o0.ColumnWidth = "80px";                       //宽度
            o0.ColumnName = "TableKey";                    //字段名，也是显示的表头
            o0.Display = "none";                           //是否显示，如果不希望显示，则此处用"none"来表示，如果希望显示则以""表示
            DropDownColumns.push(o0);

            var o1 = new Object();
            o1.ColumnWidth = "80px";
            o1.ColumnName = "姓名";
            o1.Display = "";
            DropDownColumns.push(o1);
            var o2 = new Object();
            o2.ColumnWidth = "80px";
            o2.ColumnName = "职务";
            o2.Display = "";
            DropDownColumns.push(o2);
            var o3 = new Object();
            o3.ColumnWidth = "300px";
            o3.ColumnName = "所在";
            o3.Display = "";
            DropDownColumns.push(o3);
 //第三步，控件化。其中，最后一个参数是获取数据的一般处理程序，返回数据格式为JSON字符串，须与”DropDownColumns（第二步自定义的列）“对应。
            $("#Text1").KingAutoSelect(settings, DropDownColumns, "getUserList.ashx");//最后一个是获取数据的一般处理程序地址，执行后传递JSON字符串即可
        }

一般处理程序代码（可根据实际情况，自行编写），其中"key"是控件自动传过来的文本框中输入的内容：

string sqlstr = "select top 30 TableKey,姓名,职务,所在 from view_人员信息";
            sqlstr += " where 有效否=1 and (姓名 like @key or 拼音码 like @key or 五笔码 like @key)";
            SqlCommand cmd = new SqlCommand(sqlstr);
            cmd.Parameters.AddWithValue("@key","%"+context.Request["key"]+"%");

            DataTable dt = King.DataBase.SqlServer.GetDataSet(cmd).Tables[0];

            List<UserList> li = new List<UserList>();
            foreach (DataRow dr in dt.Rows)
            {
                UserList ul = new UserList();
                ul.TableKey = dr["TableKey"].ToString();
                ul.姓名 = dr["姓名"].ToString();
                ul.职务 = dr["职务"].ToString();
                ul.所在 = dr["所在"].ToString();
                li.Add(ul);
            }
            context.Response.Write(King.StringOper.getJsonStr(li));

 其中UserList，是自己定义的一个类，代码如下：

 

 

public class UserList
        {
            public string TableKey;
            public string 姓名;
            public string 职务;
            public string 所在;
        }

源代码及示例下载：

http://download.csdn.net/detail/u011616825/5880431