Paul Kimmel's Blog

There are a lot of ways to skin a cat. In the prior blog--http://community.devexpress.com/blogs/paulk/archive/2009/12/15/filtering-with-multi-column-aspxcombobox-in-aspxgridview.aspx--with a similar title I implemented some JavaScript that searched all of the items and all of the columns in a multi-column ASPxComboBox tucked away in an ASPxGridView EditItem Template. The prior post just used a single character typed and cycled through the items with that first character. Here is a revision—all of the steps for constructing the filtering capability can be used from the prior post—that allows the user to type in multiple characters and then searches for a match based on those characters.

Assume for example that you have an ID column and a Name column. In this solution add KeyUp and KeyDown events for the ASPxComboBox. On KeyDown the event calls Clear which clears the stored input text for the first key and stores all alpha-numeric key values in a client-side variable. A regular expression is used to test the input characters. In the KeyUp event handler a timer is set to call CompareText after 500 milliseconds. CompareText clears the timer and then invokes the search—FindValidItem. FindValidItem cycles through all of the items in the ASPxComboBox and all of the column data individually. The input text stored in the local field currentText is compared to the first n-characters in the ASPxComboBox column data. If a match is found then that item in the ASPxComboBox is selected and the local field is set back to an empty string in preparation for the next search.

Listing 1 contains the definition of the client-side attributes to set for the ASPxComboBox, and Listing 2 contains the JavaScript that stores the input and performs the search.

Listing 1: Add these attributes and code to the ASPxComboBox.

<ClientSideEvents KeyUp="function(s,e) {
                   timeout = window.setTimeout(CompareText, 500);
                   }"
                   KeyDown="function(s,e){ Clear(s,e); }"
               />

Listing 2: Add this script to the script block section of the ASPX page.

var currentText = "";
var timeout = null;
var clear = false;

function CompareText() {
  // clear the timer and perfomer the search
  if (timeout != null)
    window.clearTimeout(timeout);
  FindValidItem(Combo);
}

function Clear(s, e) {
  // clear the stored text and input editor
  if (!clear) {
    clear = true;
    currentText = "";
    Combo.GetInputElement().value = "";
    Combo.SetSelectedIndex(-1);
  }
  // store alphanumeric characters
  var ch = String.fromCharCode(e.htmlEvent.keyCode);
  var regex = /^([a-zA-Z0-9]+)$/;
  if(regex.test(ch))
    currentText = currentText + ch;
}

function FindValidItem(Combo) {
  // don't search an empty string
  if (currentText == "") return;
  // check all items
  for (var i = 0; i < Combo.GetItemCount(); i++)
    // check all columns
    for (var j = 0; j < Combo.GetItem(i).texts.length; j++) {
    var str = Combo.GetItem(i).texts[j];
    if (currentText.toUpperCase() == str.substr(0, currentText.length).toUpperCase()) {
      if (Combo.GetSelectedIndex() == i) continue;
      Combo.SetSelectedIndex(i);
      Combo.SetCaretPosition(Combo.GetItem(i).text.length);
      // cleanup stored characters
      currentText = "";
      clear = false;
      return;
    }
  }
  currentText = "";
}