最近在做基础系统的时候,我们在经过考虑,商量需求后,希望系统能实现功能的同时,还要给用户一种界面友好的感受。综合用户的使用习惯,希望在使用的下拉框中不仅能够显示从数据库中查询返回的信息,同时,还能够往里面输入值,根据这个输入的值在下拉框中自动匹配。现在就来说说我的思考过程和实现的过程吧。。。。。
基础系统的界面使用的都是ASP的控件,为了界面的统一,也用ASP控件。
在ASP控件中,DropDwonList下拉控件只能从里面选择,不能往里面输入,所以直接用DropDwonList是不可行的。
将DropDownList和TextBox结合,由CSS来控制它们的显示隐藏
优点:能够实现下拉框既能够输入也能够选择,
缺点:输入值后自动匹配功能不能实现。
分析原因:自动匹配可以用模糊查询来代替,但是用什么事件来触发这个模糊查询呢?如果说是用TextBox值改变的时候,那么你的界面就一点都不友好了,TextBox值改变,需要TextBox失去焦点,总不能我输入后再点一下界面的空白处吧?!更何况,即使这样可行,你查询到的值返回给DropDownList后,DropDownList下拉框不能展开,所以说也就不能直观的看到查询到的值,达不到想要的效果。
所以这也就只能实现部分功能,这样还是不可行。
将DropDownList和TextBox结合,由CSS来控制它们的显示隐藏,然后用JS来实现匹配。
分析:这个方法虽然说也能够实现前半部分,用JS,需要用某一个事件来调用JS写的函数,这又回到上面那个问题了,用一个什么函数来触发这个事件的问题。keydown?enter?不行的,对于ASP的控件来说,没有这些方法。
所以说这个也被我否定了。
private string strConn1; private SqlDataReader sdr = null; private SqlConnection sqlConn = null; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { DataTable dtResult = new DataTable(); dtResult = QueryAllSystem(); ComboBox1.DataSource = dtResult; ComboBox1.DataTextField = "SystemName"; ComboBox1.DataBind(); } } public DataTable QueryAllSystem() { DataTable dtAll = new DataTable(); //sql语句 // string strSQL = "select top 10 from TB_Student order by StudentName collate chinese_prc_cs_as_ks_ws "; string strSQL = "SELECT * FROM TB_SystemManager order by SystemName collate chinese_prc_cs_as_ks_ws "; //执行sql语句 dtAll = ExecuteQuery(strSQL, CommandType.Text); return dtAll; } public DataTable ExecuteQuery(string cmdText, CommandType cmdType) { //定义并实例化DataTable表 DataTable dtResult = new DataTable(); //实例化SqlCommand SqlCommand sqlCmd = new SqlCommand(cmdText, GetConn()); //传来的SqlCommand类型:存储过程、sql语句等 sqlCmd.CommandType = cmdType; using (sdr = sqlCmd.ExecuteReader(CommandBehavior.CloseConnection)) { dtResult.Load(sdr); //关闭记录集 sdr.Close(); } //判断数据表中是否有数据,数据表中有数据返回数据表,否则返回null if (dtResult.Rows.Count > 0) { //返回数据表 return dtResult; } else { //没有数据,也返回数据表,只是数据表中无数据 return dtResult; } } public SqlConnection GetConn() { string strConn = ConfigurationManager.ConnectionStrings["strConnDB"].ConnectionString; strConn1 = strConn; //实例化数据库连接对象 sqlConn = new SqlConnection(strConn); //如果数据库状态为关闭,打开数据库 sqlConn.Open(); return sqlConn; }显示效果: