实现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.csdn.net/ytc_1224/article/details/4040801