CODEWITHSUNDEEP
asp.netdrop-down-menu
John
John

Reputation: 1910

asp:dropdown auto complete with pause in typing

I have a standard asp:dropdown control, by default this allows the user to type into it and it will auto select the best matched item form the list. They can also drop the list down.

My user is entering a work order number with a pause like this:

Example of the asp markup

 <asp:DropDownList runat="server" ID="uxWorkOrder" Width="386"></asp:DropDownList>

Questions

  1. With the pause in typing the dropdown only filters on the first 4 characters, what's the best approach to allow the user to pause and continue on?

  2. How can the user reset the text to blankwithout using the mouse to scroll to the top 'blank item' (Preferably by pressing the spacebar)?

Upvotes: 1

Views: 3212

Answers (1)

Prash
Prash

Reputation: 1122

Regarding your Question#1, I don't think you can control that behavior. (I might be wrong though).

Edit To Include Answer For Question#1: Because, one can't define how long a pause could be; I assume here that to start a fresh search on combo; one should press the space key

function checkBlank() {
            if (event.keyCode == 32) {
                document.getElementById('ddlMain').value = '';
                document.getElementById('txtSearchText').value = '';
                return false;
            }

            document.getElementById('txtSearchText').value = document.getElementById('txtSearchText').value + String.fromCharCode(event.which);

            makeSelection();

            return true;
        }

        function makeSelection() {
            var options = document.getElementById('ddlMain').options;
            var matchString = document.getElementById('txtSearchText').value.toLowerCase();
            for (i = 0; i < options.length; i++) {
                if (options[i].value.toLowerCase().indexOf(matchString) == 0) {
                    options[i].selected = true;
                    return;
                }
            }
        }

    <asp:DropDownList runat="server" ID="ddlMain" onkeydown="javascript:return checkBlank();">
                <asp:ListItem Text="" />
                <asp:ListItem Text="Apple" />
                <asp:ListItem Text="Orange" />
                <asp:ListItem Text="Banana" />
    </asp:DropDownList>

<asp:HiddenField runat="server" ID="txtSearchText" />

Simply for Question#2, you can use javascript as shown below

function checkBlank() {
    if (event.keyCode == 32) {
        document.getElementById('ddlMain').value = '';
        return false;
    }

    return true;
}

<asp:DropDownList runat="server" ID="ddlMain" onkeydown="javascript:return checkBlank();">
            <asp:ListItem Text="" />
            <asp:ListItem Text="Apple" />
            <asp:ListItem Text="Orange" />
            <asp:ListItem Text="Banana" />
</asp:DropDownList>

Upvotes: 3

Related Questions