locked
How can we enter or select value in dropdown list (both way) in ASP.NET C# RRS feed

  • Question

  • User-1024101449 posted

    Hi,

    I am using number of dropdown controls. But, some of the dropdown controls contains thousand and more than that.

    My client want some user friendly to use, either can enter or select value from dropdown list in ASP.NET C#.

    which is best method and controls can use for this solution.

    Note : pls. provide the sample codes.

    Thursday, July 5, 2018 12:14 PM

Answers

  • User283571144 posted

    Hi gani7787,

    Accordding to your description, I suggest you could consider using jquery-ui’s plugin autocomplete combobox to achieve your requirement.

    You could use $("#DropDownList1").combobox() to achieve your requirement.

    More details, you could refer to below codes:

    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>jQuery UI Autocomplete - Combobox</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <link href="jquery-ui/themes/base/style.css" rel="stylesheet" />
        <link href="jquery-ui/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="jquery-ui/jquery-ui.min.js"></script>
     
    	<style>
    	.custom-combobox {
    		;
    		display: inline-block;
    	}
    	.custom-combobox-toggle {
    		;
    		top: 0;
    		bottom: 0;
    		margin-left: -1px;
    		padding: 0;
    	}
    	.custom-combobox-input {
    		margin: 0;
    		padding: 5px 10px;
    	}
    	</style>
     
    	<script >
    		$.widget( "custom.combobox", {
    			_create: function() {
    				this.wrapper = $( "<span>" )
    					.addClass( "custom-combobox" )
    					.insertAfter( this.element );
     
    				this.element.hide();
    				this._createAutocomplete();
    				this._createShowAllButton();
    			},
     
    			_createAutocomplete: function() {
    				var selected = this.element.children( ":selected" ),
    					value = selected.val() ? selected.text() : "";
     
    				this.input = $( "<input>" )
    					.appendTo( this.wrapper )
    					.val( value )
    					.attr( "title", "" )
    					.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
    					.autocomplete({
    						delay: 0,
    						minLength: 0,
    						source: $.proxy( this, "_source" )
    					})
    					.tooltip({
    						classes: {
    							"ui-tooltip": "ui-state-highlight"
    						}
    					});
     
    				this._on( this.input, {
    					autocompleteselect: function( event, ui ) {
    						ui.item.option.selected = true;
    						this._trigger( "select", event, {
    							item: ui.item.option
    						});
    					},
     
    					autocompletechange: "_removeIfInvalid"
    				});
    			},
     
    			_createShowAllButton: function() {
    				var input = this.input,
    					wasOpen = false;
     
    				$( "<a>" )
    					.attr( "tabIndex", -1 )
    					.attr( "title", "Show All Items" )
    					.tooltip()
    					.appendTo( this.wrapper )
    					.button({
    						icons: {
    							primary: "ui-icon-triangle-1-s"
    						},
    						text: false
    					})
    					.removeClass( "ui-corner-all" )
    					.addClass( "custom-combobox-toggle ui-corner-right" )
    					.on( "mousedown", function() {
    						wasOpen = input.autocomplete( "widget" ).is( ":visible" );
    					})
    					.on( "click", function() {
    						input.trigger( "focus" );
     
    						// Close if already visible
    						if ( wasOpen ) {
    							return;
    						}
     
    						// Pass empty string as value to search for, displaying all results
    						input.autocomplete( "search", "" );
    					});
    			},
     
    			_source: function( request, response ) {
    				var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
    				response( this.element.children( "option" ).map(function() {
    					var text = $( this ).text();
    					if ( this.value && ( !request.term || matcher.test(text) ) )
    						return {
    							label: text,
    							value: text,
    							option: this
    						};
    				}) );
    			},
     
    			_removeIfInvalid: function( event, ui ) {
     
    				// Selected an item, nothing to do
    				if ( ui.item ) {
    					return;
    				}
     
    				// Search for a match (case-insensitive)
    				var value = this.input.val(),
    					valueLowerCase = value.toLowerCase(),
    					valid = false;
    				this.element.children( "option" ).each(function() {
    					if ( $( this ).text().toLowerCase() === valueLowerCase ) {
    						this.selected = valid = true;
    						return false;
    					}
    				});
     
    				// Found a match, nothing to do
    				if ( valid ) {
    					return;
    				}
     
    				// Remove invalid value
    				this.input
    					.val( "" )
    					.attr( "title", value + " didn't match any item" )
    					.tooltip( "open" );
    				this.element.val( "" );
    				this._delay(function() {
    					this.input.tooltip( "close" ).attr( "title", "" );
    				}, 2500 );
    				this.input.autocomplete( "instance" ).term = "";
    			},
     
    			_destroy: function() {
    				this.wrapper.remove();
    				this.element.show();
    			}
    		});
     
     
            $(function () {
     
                $("#DropDownList1").combobox();
            })
    	
    	//	$( "#toggle" ).on( "click", function() {
    		
    	//$( "#DropDownList1" ).toggle();
    	//	});
    	</script>
    </head>
    <body>
    	<form id="form1" runat="server">
    <div class="ui-widget">
     
    	
     
    	
    <asp:DropDownList ID="DropDownList1" runat="server"  AutoPostBack="True" DataSourceID="SqlDataSource1" DataTextField="CustomerID" DataValueField="CustomerID"  >
     
    </asp:DropDownList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [CustomerID] FROM [Customers]"></asp:SqlDataSource></div>
     
     
    		</form>
    

    Result:

    Best Regards.

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 9, 2018 9:40 AM

All replies

  • User-1034726716 posted

    some of the dropdown controls contains thousand and more than that.

    Displaying such data in a single DropDownList may affects the load performance in the page. I'd suggest you to filter the items and load only the associated data in the DropDownList . You could try implementing it using cascading DropDownList or AutoComplete DropDownList as already suggested to increased usability. Here are some articles that you can refer:

    Friday, July 6, 2018 12:44 AM
  • User-1171043462 posted

    Two Options

    1. AJAX ComboBox DropDown. As it gives ability to search and filter: Ajax Control ToolKit ComboBox Extender Tutorial with example in ASP.Net
    2. AutoComplete TextBox. It wil allow you to type and select item. Can be implemented using AJAX Control Toolkit and also jQuery

    AJAX AutoCompleteExtender Example in ASP.Net

    Using jQuery AutoComplete Plugin in ASP.Net

    Friday, July 6, 2018 10:33 AM
  • User283571144 posted

    Hi gani7787,

    Accordding to your description, I suggest you could consider using jquery-ui’s plugin autocomplete combobox to achieve your requirement.

    You could use $("#DropDownList1").combobox() to achieve your requirement.

    More details, you could refer to below codes:

    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>jQuery UI Autocomplete - Combobox</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <link href="jquery-ui/themes/base/style.css" rel="stylesheet" />
        <link href="jquery-ui/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="jquery-ui/jquery-ui.min.js"></script>
     
    	<style>
    	.custom-combobox {
    		;
    		display: inline-block;
    	}
    	.custom-combobox-toggle {
    		;
    		top: 0;
    		bottom: 0;
    		margin-left: -1px;
    		padding: 0;
    	}
    	.custom-combobox-input {
    		margin: 0;
    		padding: 5px 10px;
    	}
    	</style>
     
    	<script >
    		$.widget( "custom.combobox", {
    			_create: function() {
    				this.wrapper = $( "<span>" )
    					.addClass( "custom-combobox" )
    					.insertAfter( this.element );
     
    				this.element.hide();
    				this._createAutocomplete();
    				this._createShowAllButton();
    			},
     
    			_createAutocomplete: function() {
    				var selected = this.element.children( ":selected" ),
    					value = selected.val() ? selected.text() : "";
     
    				this.input = $( "<input>" )
    					.appendTo( this.wrapper )
    					.val( value )
    					.attr( "title", "" )
    					.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
    					.autocomplete({
    						delay: 0,
    						minLength: 0,
    						source: $.proxy( this, "_source" )
    					})
    					.tooltip({
    						classes: {
    							"ui-tooltip": "ui-state-highlight"
    						}
    					});
     
    				this._on( this.input, {
    					autocompleteselect: function( event, ui ) {
    						ui.item.option.selected = true;
    						this._trigger( "select", event, {
    							item: ui.item.option
    						});
    					},
     
    					autocompletechange: "_removeIfInvalid"
    				});
    			},
     
    			_createShowAllButton: function() {
    				var input = this.input,
    					wasOpen = false;
     
    				$( "<a>" )
    					.attr( "tabIndex", -1 )
    					.attr( "title", "Show All Items" )
    					.tooltip()
    					.appendTo( this.wrapper )
    					.button({
    						icons: {
    							primary: "ui-icon-triangle-1-s"
    						},
    						text: false
    					})
    					.removeClass( "ui-corner-all" )
    					.addClass( "custom-combobox-toggle ui-corner-right" )
    					.on( "mousedown", function() {
    						wasOpen = input.autocomplete( "widget" ).is( ":visible" );
    					})
    					.on( "click", function() {
    						input.trigger( "focus" );
     
    						// Close if already visible
    						if ( wasOpen ) {
    							return;
    						}
     
    						// Pass empty string as value to search for, displaying all results
    						input.autocomplete( "search", "" );
    					});
    			},
     
    			_source: function( request, response ) {
    				var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
    				response( this.element.children( "option" ).map(function() {
    					var text = $( this ).text();
    					if ( this.value && ( !request.term || matcher.test(text) ) )
    						return {
    							label: text,
    							value: text,
    							option: this
    						};
    				}) );
    			},
     
    			_removeIfInvalid: function( event, ui ) {
     
    				// Selected an item, nothing to do
    				if ( ui.item ) {
    					return;
    				}
     
    				// Search for a match (case-insensitive)
    				var value = this.input.val(),
    					valueLowerCase = value.toLowerCase(),
    					valid = false;
    				this.element.children( "option" ).each(function() {
    					if ( $( this ).text().toLowerCase() === valueLowerCase ) {
    						this.selected = valid = true;
    						return false;
    					}
    				});
     
    				// Found a match, nothing to do
    				if ( valid ) {
    					return;
    				}
     
    				// Remove invalid value
    				this.input
    					.val( "" )
    					.attr( "title", value + " didn't match any item" )
    					.tooltip( "open" );
    				this.element.val( "" );
    				this._delay(function() {
    					this.input.tooltip( "close" ).attr( "title", "" );
    				}, 2500 );
    				this.input.autocomplete( "instance" ).term = "";
    			},
     
    			_destroy: function() {
    				this.wrapper.remove();
    				this.element.show();
    			}
    		});
     
     
            $(function () {
     
                $("#DropDownList1").combobox();
            })
    	
    	//	$( "#toggle" ).on( "click", function() {
    		
    	//$( "#DropDownList1" ).toggle();
    	//	});
    	</script>
    </head>
    <body>
    	<form id="form1" runat="server">
    <div class="ui-widget">
     
    	
     
    	
    <asp:DropDownList ID="DropDownList1" runat="server"  AutoPostBack="True" DataSourceID="SqlDataSource1" DataTextField="CustomerID" DataValueField="CustomerID"  >
     
    </asp:DropDownList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [CustomerID] FROM [Customers]"></asp:SqlDataSource></div>
     
     
    		</form>
    

    Result:

    Best Regards.

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 9, 2018 9:40 AM
  • User-1024101449 posted

    Excellent..Thanks

    Tuesday, August 21, 2018 7:00 AM