Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
395
Incremental search in DropDownList mode
posted

As far as I have been able to tell, this is not implemented, so I put together a handler that should work. This is preliminary (I have not gone all the way with implementation), but it might help others:

Normal 0 false false false EN-CA X-NONE X-NONE MicrosoftInternetExplorer4

function eventToChar(code) {

    if (code < 32 || // Shift codes, etc.

        (code > 32 && code < 41) || // Arrows, etc.

        (code >= 45 && code <= 46) || // Ins, Del

        (code >= 91 && code <= 93) || // Window keys, select key

        (code >= 112 && code <= 123) || // F1 - F12

        (code >= 144 && code <= 145) || // Num lock, scroll lock

        code >= 256)

        return null;

    else

        return String.fromCharCode(code);

}

 

function dropDownMatch(control, match) {

    if (control.get_enableCaseSensitivity()) {

        for (i = 0; i < control.get_items().getLength(); i++) {

            // if (items[i].get_text() == match || items[i].get_text().startsWith(match)) {

            if (control.get_items().getItem(i).get_text() == match || control.get_items().getItem(i).get_text().startsWith(match)) {

                return control.get_items().getItem(i);

            }

        }

    } else {

        for (i = 0; i < control.get_items().getLength(); i++) {

            if (control.get_items().getItem(i).get_text() == match.toLowerCase() || control.get_items().getItem(i).get_text().toLowerCase().startsWith(match.toLowerCase())) {

                return control.get_items().getItem(i);

            }

        }

    }

    return null;

}

 

function selectFirstDropDownMatch(control, match) {

    var matchedItem = dropDownMatch(control, match);

    if (matchedItem) {

        if (!control.behavior.get_visible() && !control.behavior.get_isAnimating()) {

            control.openDropDown();

        }

        control.__scrollToItem(matchedItem);

        control.set_activeItem(matchedItem);

        return true;

    } else

        return false;

}

 

function startClearMatchTimer(control) {

    clearTimeout(control._clearMatchTimerID);

    control._clearMatchTimerID = setTimeout(

        function() { clearMatchTimer(control); }, 1500);

}

 

function clearMatchTimer(control) {

    control._matchText = undefined;

}

 

function inputKeyUp(control, event) {

    var code = event.get_browserEvent().keyCode;

    var match = control._matchText;

    if (!match)

        match = "";

    if (code == 8) { // Backspace

        match = match.substring(0, match.length - 2);

        selectFirstDropDownMatch(control, match);

        control._matchText = match;

        startClearMatchTimer(control);

    } else {

        matchChar = eventToChar(code);

        if (matchChar) {

            match = match + matchChar;

            if (selectFirstDropDownMatch(control, match)) {

                control._matchText = match; // Only set if the match succeeded

                startClearMatchTimer(control);

            }

        }

    }

}

Assign it to <ClientEvents InputKeyUp="inputKeyUp" /> in the <ig:WebDropDown> to get the functionality. Uses the control's own case-sensitivity settings, and the 'search string' clears after a second and a half (the 1500) of not typing.

--=- Ritchie Annand

  • 395
    posted

    You might also want to assign a DropDownClosing to an event like this:

    function clearMatch(control, event) {
        control._matchText = undefined;
    }

    ...especially if you up the amount of time the match text hangs around. This way you can hit <ENTER> on your choice and jump right back in and select something else.