实现txtbox的AutoComplete

实现效果

前台代码

 

  <script language="javascript" type="text/javascript">

                function BxdwResult() {
                    var BxdwTxt = document.getElementById("txtBxdw");
                    if (BxdwTxt.value != null && BxdwTxt.value != "") {
                        Otitan.Web.ForestCuttingManage.CuttingQuota.QuotaManage.QuotaQuery.QuatoQueryManage.GetCompilationUnitList(BxdwTxt.value, get_Bxdw_Result_CallBack);
                    }
                    else {
                        document.getElementById("ddlTxtBox").style.display = "none";
                        var unitcode = document.getElementById("unitcode");
                        unitcode.value = "";
                    }
                }

                function get_Bxdw_Result_CallBack(response) {
                    var unitcode = document.getElementById("unitcode");
                    unitcode.value = "";
                    if (response.value != null) {
                        //debugger;
                        document.getElementById("ddlTxtBox").style.display = "block";
                        document.getElementById("ddlTxtBox").length = 0;
                        var ds = response.value;
                        if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
                            for (var i = 0; i < ds.Tables[0].Rows.length; i++) {
                                var name = ds.Tables[0].Rows[i].UNITNAME;
                                var id = ds.Tables[0].Rows[i].UNITCODE;
                                document.getElementById("ddlTxtBox").options.add(new Option(name, id));
                            }
                        }
                    }
                    else {
                        document.getElementById("ddlTxtBox").style.display = "none";
                    }
                    return
                }

                function getData() {
                    var province = document.getElementById("ddlTxtBox");
                    var bxdw = document.getElementById("txtBxdw");
                    var pindex = province.selectedIndex;
                    var unitcode = document.getElementById("unitcode");
                    unitcode.value = "";
                   // var pname = province.selectedValue;
                    if (pindex != -1) {
                        var pValue = province.options[pindex].value;
                        //var pUnit = province.options[pname].value;
                        
                        
                        unitcode.value = pValue;
                        bxdw.value = province.options[pindex].text;

                        province.style.display = "none";
                        //window.location.href = "PreDeclarationed.aspx?xmid=" + pValue;
                    }
                    else {
                        province.style.play = "none";
                    }
                }

            </script>

    <asp:TextBox ID="txtBxdw" runat="server" Width="90%" CssClass="TextBox_XBSJ_1"></asp:TextBox>
     <input name="unitcode" type="hidden" id="unitcode" runat="server" />
       <div style=" position:relative; ">
         <div style=" position: absolute;width:105%; left:-5%;"> 
	     <table style="margin-top: 0px; padding-top: 0px; width:90%">
             <asp:ListBox ID="ddlTxtBox" runat="server" Style="display: none" Width="100%"> </asp:ListBox>
            </table> 
	   </div>
         </div>

后台代码

 [AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.Read)]
        public  DataSet GetCompilationUnitList(string value)
        {
            string where = "select * from view_compilationunit t where t.unitname like '%" + value + "%'";
            DataSet ds = DbHelperOra.Query(where);
            return ds;
        }

protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(QuatoQueryManage));
            if (!IsPostBack)
            {
                this.txtBxdw.Attributes.Add("onkeyup", "BxdwResult();");
                this.ddlTxtBox.Attributes.Add("onclick", "getData();");
            }
        }

扩展阅读

1、使用AutoCompleteExtender控件  http://www.cnblogs.com/SilverLight/archive/2008/09/28/1301755.html

2、AutoCompleteExtender返回text-value键值对的变通方法

   http://blog.youkuaiyun.com/ytc_1224/article/details/4040801