VS.NET - ASP.NET - Autocomplete Dropdownlist control

ASP.NET Autocomplete Dropdownlist control with SelectedIndexChange postback events.

Synopsis:

The ASP.NET dropdownlist control and the html select object that it is based on provide only simple autocomplete functionality. Type in an "a" and you are taken to the first item that begins with an "a". Type in a "t" and you will be taken to the first item that begins with a "t". This behavior occurs even if there is an item in the list with the text "atom". For most users, this is not the desired behavior. After a short search of the web I found an asp.net control which does this.The Thycotic dropdown list control as converted to vb.net by John Kilgo. To see this code, go here. This control seemed to work great for me for a few days, but then I began to notice under several circumstances the selectedIndexChanged event would not fire. I discovered this is because the html select object does not fire an onchange event in IE if the index is changed programmatically. I made several modifications to the code of the Thycotic based dropdownlist which addresses these issues and ensures that a selectedindexchanged event is always called.

Solution:

Download : Dll and Code



Imports System
Imports System.Web.UI.WebControls

Namespace Thycotic.Web.UI.WebControls
    Public Class KeySortDropDownList
        Inherits DropDownList

        Private Shared functionName As String = "KeySortDropDownList_onkeypress"
        Private _caseSensitiveKeySort As Boolean = False


        Public Overridable Property CaseSensitiveKeySort() As Boolean
            Get
                Return _caseSensitiveKeySort
            End Get
            Set(ByVal Value As Boolean)
                _caseSensitiveKeySort = Value
            End Set
        End Property

        Protected Overrides Sub OnPreRender(ByVal e As System.EventArgs)
            MyBase.OnPreRender(e)

            Dim currIndex As Int32 = Me.SelectedIndex
            ' define the client-side script
            Dim script As String
            script = "<script language=" & Chr(34) & "javascript" & Chr(34) & " type=" & Chr(34) & "text/javascript" & Chr(34) & ">" & vbCrLf
            script &= "var onchangefired=false; " & vbCrLf
            script &= "function " & functionName & " (dropdownlist,caseSensitive) {" & vbCrLf
            script &= "  // check the keypressBuffer attribute is defined on the dropdownlist" & vbCrLf
            script &= "  var undefined; " & vbCrLf
            script &= "  if (dropdownlist.keypressBuffer == undefined) { " & vbCrLf
            script &= "    dropdownlist.keypressBuffer = ''; " & vbCrLf
            script &= "  } " & vbCrLf
            script &= "  // get the key that was pressed " & vbCrLf
            script &= "if (window.event.keyCode == 13||window.event.keyCode == 9){dropdownlist.fireEvent('onChange');}" & vbCrLf
            script &= "  var key = String.fromCharCode(window.event.keyCode); " & vbCrLf
            script &= "  dropdownlist.keypressBuffer += key;" & vbCrLf
            script &= "  if (!caseSensitive) {" & vbCrLf
            script &= "    // convert buffer to lowercase" & vbCrLf
            script &= "    dropdownlist.keypressBuffer = dropdownlist.keypressBuffer.toLowerCase();" & vbCrLf
            script &= "  }" & vbCrLf
            script &= "  // find if it is the start of any of the options " & vbCrLf
            script &= "  var optionsLength = dropdownlist.options.length; " & vbCrLf
            script &= "  for (var n=0; n < optionsLength; n++) { " & vbCrLf
            script &= "    var optionText = dropdownlist.options[n].text; " & vbCrLf
            script &= "    if (!caseSensitive) {" & vbCrLf
            script &= "      optionText = optionText.toLowerCase();" & vbCrLf
            script &= "    }" & vbCrLf
            script &= "    if (optionText.indexOf(dropdownlist.keypressBuffer,0) == 0) { " & vbCrLf
            script &= "      dropdownlist.selectedIndex = n; " & vbCrLf

            script &= "      return false; // cancel the default behavior since " & vbCrLf
            script &= "                    // we have selected our own value " & vbCrLf
            script &= "    } " & vbCrLf
            script &= "  } " & vbCrLf
            script &= "  // reset initial key to be inline with default behavior " & vbCrLf
            script &= "  dropdownlist.keypressBuffer = key; " & vbCrLf
            script &= "  return true; // give default behavior " & vbCrLf
            script &= "} " & vbCrLf
            script &= "</script>"

            ' register the client-side script block
            Me.Page.RegisterClientScriptBlock(functionName, script) '
            ' add to the onkeypress event

            Me.Attributes.Add("onkeypress", "return " + functionName + "(this," + _caseSensitiveKeySort.ToString().ToLower() + ")")
            Me.Attributes.Add("onkeydown", "if (window.event.keyCode == 13||window.event.keyCode == 9||window.event.keyCode == 27){this.fireEvent('onChange');onchangefired=true;}")

            Me.Attributes.Add("onclick", "if (this.selectedIndex!=" & Me.SelectedIndex & " && onchangefired==false) {this.fireEvent('onChange');onchangefired=true;}")
            Me.Attributes.Add("onblur", "if (this.selectedIndex!=" & Me.SelectedIndex & " && onchangefired==false) {this.fireEvent('onChange')}")
        End Sub



    End Class 'KeySortDropDownList
End Namespace 'Thycotic.Web.UI.WebControls
About this page: