locked
DropDownlist that allows manual entry by user RRS feed

  • Question

  • User1016820894 posted

    I have the following drop down list in my asp.net project that is populated from an sql table. I need to have the functionality to allow the user to manually type in their own value. How would I modify the code to do that? Thanks.

    Html code:

    <asp:Label ID="LabelFormula" runat="server" style=";top:120px;left:30px;width:200px;font-weight:bold" Text="Formula:" Font-Names="Arial" Font-Size="11pt"></asp:Label>
    <asp:DropDownList ID="FormulaDropDownList" runat="server" AutoPostBack="True" CssClass="formuladrpdwn" DataValueField="FormulaDesc"   Width="200px">
    </asp:DropDownList>

    Code Behind:

    using (SqlCommand cmd = new SqlCommand("SP_FormulaDropDownList", connsqlenteral))
    {
        cmd.CommandType = CommandType.StoredProcedure;
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        da.Fill(dt);

        FormulaDropDownList.DataSource = dt;
        FormulaDropDownList.DataBind();

    }

    Friday, August 30, 2019 8:11 PM

All replies

  • User61956409 posted

    Hi baldwinjohn,

    I have the following drop down list in my asp.net project that is populated from an sql table. I need to have the functionality to allow the user to manually type in their own value. How would I modify the code to do that?

    To achieve the requirement, you can try to combobox widget which enables to type something into the field to get filtered suggestions based on user input.

    https://jqueryui.com/autocomplete/#combobox

    Besides, if you'd like to enable users type their own value in input field, you can modify the code to disable _removeIfInvalid method, like below.

    <script>
        $(function () {
            $.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();
                }
            });
    
            $("#FormulaDropDownList").combobox();
        });
    </script>

    Test Result:

    With Regards,

    Fei Han

    Monday, September 2, 2019 5:38 AM