问大家一个问题，Asp.net中，怎样实现下拉框可搜索功能？

我以前在公司中，DropDownList 中的值很多，点开之后输入开头关键字，下拉框的值就找到那里了，比如说
“我输入"新闻",
下拉框的值就会出现：

新闻管理
新闻看点
新闻周刊
新闻晨播
新闻两则
新闻频道

我现在的下拉列表值很多，想实现该功能，可惜不会了，哪位高手给我说一下？

21 个解决方案

#1

这个是用ajax实现的。
百度一下，“ajax 自动完成 ”

#2

AutoComplete控件可以做

http://www.cnblogs.com/oec2003/archive/2007/08/18/860870.html

Jquery也有很多自动完成的插件

比如： AutoComplete-JQuery

#3

我只需在DropDownList 中输入，没有任何可输入的地方？不用文本框

#4

这是能使用模糊查询吗？？
楼主试试吧

#5

DropDownList是不能做输入功能的。
几年前曾经做过一个，是用的textbox+dropdownlist+div+js结合做的。
但是对定位控制非常不好，只能按屏幕绝对定位。

#6

不对说错了啊
是ajax能做成的
我记得我以前做过
要不我发个例子给你吧

#7

貌似有第三方控件有这种功能的说

#8

我以前在公司人家就是在下拉框输入关键字自动定位到值？感觉很强悍，现在想用不知道怎么做？

#9

收藏的你看看吧我自己的找不着了
主要是ajax的那些东西放在一起了有点乱改天在整理就好了



<HTML>

    <HEAD>

        <title>WebForm1</title>

        <SCRIPT language="javascript">           

            //城市------------------------------

            function cityResult()

            {

                var city=document.getElementById("TextBox1");

                WebForm1.GetCityList(city.value,get_city_Result_CallBack);

            }

           

            function get_city_Result_CallBack(response)

            {

                if (response.value != null)

                {                   

                    //debugger;

                    document.getElementById("DropDownList1").style.display="block";

                    document.getElementById("DropDownList1").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].city;

　　　　　　                var id=ds.Tables[0].Rows[i].cityID;

　　　　　　                document.getElementById("DropDownList1").options.add(new Option(name,id));

　　　　                }

                    }

                }

                else

                {

                    document.getElementById("DropDownList1").style.display="none";

                }            

                return

            }

          

            function getData()

            {

                var province=document.getElementById("DropDownList1");

                var pindex = province.selectedIndex;

                var pValue = province.options[pindex].value;

                var pText  = province.options[pindex].text;                                               


                document.getElementById("<%=TextBox1.ClientID%>").innerText=pText;

            }

        </SCRIPT>

    </HEAD>

    <body>

        <form id="Form1" method="post" runat="server">

            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

            <br>

            <asp:DropDownList ID="DropDownList1" runat="server" Width="192px" style="display:none"></asp:DropDownList>

        </form>

    </body>

</HTML>2.cs代码

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

namespace ajaxselect

{

    /**//// <summary>

    /// Summary description for WebForm1.

    /// </summary>

    public class WebForm1 : System.Web.UI.Page

    {

        protected System.Web.UI.WebControls.TextBox TextBox1;

        protected System.Web.UI.WebControls.DropDownList DropDownList1;

   

        private void Page_Load(object sender, System.EventArgs e)

        {

            Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));

            if (!Page.IsPostBack)

            {

                this.TextBox1.Attributes.Add("onchange", "cityResult();");

                this.DropDownList1.Attributes.Add("onclick", "getData();");

            }

        }


        Web Form Designer generated code#region Web Form Designer generated code

        override protected void OnInit(EventArgs e)

        {

            //

            // CODEGEN: This call is required by the ASP.NET Web Form Designer.

            //

            InitializeComponent();

            base.OnInit(e);

        }

       

        /**//// <summary>

        /// Required method for Designer support - do not modify

        /// the contents of this method with the code editor.

        /// </summary>

        private void InitializeComponent()

        {   

            this.Load += new System.EventHandler(this.Page_Load);


        }

        #endregion


        GetCityList#region GetCityList

        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]

        public DataSet GetCityList(int provinceid)

        {

            string sql = "select * from city where father like %" + provinceid + "%";

            return GetDataSet(sql);

        }

        #endregion

        GetDataSet#region GetDataSet

        public static DataSet GetDataSet(string sql)

        {

            string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];

            SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);

            DataSet ds = new DataSet();

            sda.Fill(ds);

            return ds;

        }

        #endregion


    }

}

#10

DropDownList是不能做输入功能的。+1
页面上看去是dropdownlist其实是模拟的

#11

ajax toolkit
http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/AutoComplete/AutoComplete.aspx

#12

昨天刚看过

http://blog.csdn.net/touzilk/article/details/6757341

你看看

#13

智能查询的功能

#14

看来实现起来还有点麻烦？

#15

http://www.oksvn.com/Article/Detail-16.shtml

#16

该回复于2011-09-08 16:04:25被版主删除

#17

引用 9 楼 terminator_lzq 的回复:

收藏的你看看吧我自己的找不着了
主要是ajax的那些东西放在一起了有点乱改天在整理就好了

C# code

<HTML>
    <HEAD>
        <title>WebForm1</title>
        <SCRIPT language="javascript">
            //城市---------------……

Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
这个是要下载Ajax包吗?

#18

引用 10 楼 anchenyanyue 的回复:

DropDownList是不能做输入功能的。+1
页面上看去是dropdownlist其实是模拟的

楼上说的可能很对？可能只是虚拟的！

#19

你看到人家做那个是模拟出来，你自己也可写个。

#20

引用 19 楼 whzh719 的回复:

你看到人家做那个是模拟出来，你自己也可写个。

Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
这个要引用什么吗？我的提示“当前上下文中不存在名称Ajax”

#21

学习了

#1

这个是用ajax实现的。
百度一下，“ajax 自动完成 ”

#2

AutoComplete控件可以做

http://www.cnblogs.com/oec2003/archive/2007/08/18/860870.html

Jquery也有很多自动完成的插件

比如： AutoComplete-JQuery

#3

我只需在DropDownList 中输入，没有任何可输入的地方？不用文本框

#4

这是能使用模糊查询吗？？
楼主试试吧

#5

DropDownList是不能做输入功能的。
几年前曾经做过一个，是用的textbox+dropdownlist+div+js结合做的。
但是对定位控制非常不好，只能按屏幕绝对定位。

#6

不对说错了啊
是ajax能做成的
我记得我以前做过
要不我发个例子给你吧

#7

貌似有第三方控件有这种功能的说

#8

我以前在公司人家就是在下拉框输入关键字自动定位到值？感觉很强悍，现在想用不知道怎么做？

#9

收藏的你看看吧我自己的找不着了
主要是ajax的那些东西放在一起了有点乱改天在整理就好了



<HTML>

    <HEAD>

        <title>WebForm1</title>

        <SCRIPT language="javascript">           

            //城市------------------------------

            function cityResult()

            {

                var city=document.getElementById("TextBox1");

                WebForm1.GetCityList(city.value,get_city_Result_CallBack);

            }

           

            function get_city_Result_CallBack(response)

            {

                if (response.value != null)

                {                   

                    //debugger;

                    document.getElementById("DropDownList1").style.display="block";

                    document.getElementById("DropDownList1").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].city;

　　　　　　                var id=ds.Tables[0].Rows[i].cityID;

　　　　　　                document.getElementById("DropDownList1").options.add(new Option(name,id));

　　　　                }

                    }

                }

                else

                {

                    document.getElementById("DropDownList1").style.display="none";

                }            

                return

            }

          

            function getData()

            {

                var province=document.getElementById("DropDownList1");

                var pindex = province.selectedIndex;

                var pValue = province.options[pindex].value;

                var pText  = province.options[pindex].text;                                               


                document.getElementById("<%=TextBox1.ClientID%>").innerText=pText;

            }

        </SCRIPT>

    </HEAD>

    <body>

        <form id="Form1" method="post" runat="server">

            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

            <br>

            <asp:DropDownList ID="DropDownList1" runat="server" Width="192px" style="display:none"></asp:DropDownList>

        </form>

    </body>

</HTML>2.cs代码

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

namespace ajaxselect

{

    /**//// <summary>

    /// Summary description for WebForm1.

    /// </summary>

    public class WebForm1 : System.Web.UI.Page

    {

        protected System.Web.UI.WebControls.TextBox TextBox1;

        protected System.Web.UI.WebControls.DropDownList DropDownList1;

   

        private void Page_Load(object sender, System.EventArgs e)

        {

            Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));

            if (!Page.IsPostBack)

            {

                this.TextBox1.Attributes.Add("onchange", "cityResult();");

                this.DropDownList1.Attributes.Add("onclick", "getData();");

            }

        }


        Web Form Designer generated code#region Web Form Designer generated code

        override protected void OnInit(EventArgs e)

        {

            //

            // CODEGEN: This call is required by the ASP.NET Web Form Designer.

            //

            InitializeComponent();

            base.OnInit(e);

        }

       

        /**//// <summary>

        /// Required method for Designer support - do not modify

        /// the contents of this method with the code editor.

        /// </summary>

        private void InitializeComponent()

        {   

            this.Load += new System.EventHandler(this.Page_Load);


        }

        #endregion


        GetCityList#region GetCityList

        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]

        public DataSet GetCityList(int provinceid)

        {

            string sql = "select * from city where father like %" + provinceid + "%";

            return GetDataSet(sql);

        }

        #endregion

        GetDataSet#region GetDataSet

        public static DataSet GetDataSet(string sql)

        {

            string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];

            SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);

            DataSet ds = new DataSet();

            sda.Fill(ds);

            return ds;

        }

        #endregion


    }

}

#10

DropDownList是不能做输入功能的。+1
页面上看去是dropdownlist其实是模拟的

#11

ajax toolkit
http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/AutoComplete/AutoComplete.aspx

#12

昨天刚看过

http://blog.csdn.net/touzilk/article/details/6757341

你看看

#13

智能查询的功能

#14

看来实现起来还有点麻烦？

#15

http://www.oksvn.com/Article/Detail-16.shtml

#16

该回复于2011-09-08 16:04:25被版主删除

#17

引用 9 楼 terminator_lzq 的回复:

收藏的你看看吧我自己的找不着了
主要是ajax的那些东西放在一起了有点乱改天在整理就好了

C# code

<HTML>
    <HEAD>
        <title>WebForm1</title>
        <SCRIPT language="javascript">
            //城市---------------……

Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
这个是要下载Ajax包吗?

#18

引用 10 楼 anchenyanyue 的回复:

DropDownList是不能做输入功能的。+1
页面上看去是dropdownlist其实是模拟的

楼上说的可能很对？可能只是虚拟的！

#19

你看到人家做那个是模拟出来，你自己也可写个。

#20

引用 19 楼 whzh719 的回复:

你看到人家做那个是模拟出来，你自己也可写个。

Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
这个要引用什么吗？我的提示“当前上下文中不存在名称Ajax”

#21

学习了

问大家一个问题，Asp.net中，怎样实现下拉框可搜索功能？

21 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

#21

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

#21

相关文章