TAB key support?

[Blake]

Is it possible to support the TAB key when an item is partially selected so that it will resolve to the highlighted item?  For example if my MultiSelect contains an item "Apple" and I start typing "App", I would like to be able to hit TAB and have it resolve to the highlighted item which would be "Apple" in this case.

Thanks,
Blake

[Georgi Krustev]

Hello Blake,
 
Generally speaking, you can wire the keydown event of the multiselect input element. Thus when TAB key is pressed you can get the input value and try to select the most appropriate item. One possible way to find an item to select is to get the data items and loop them until the correct data item is found. Then add its value to the current multiselect value using value method:

function onInputKeyDown(e) {
    var value = this.value;
    var dataitems = [multiselect].dataSource.view();
    var result = [];

    if (e.keyCode === 9) {
        for (var idx = 0, length = dataitems.length; idx < length; idx++) {
            if (dataItems[idx].[dataTextField].indexOf(value) !== -1) {
               result.push(dataItems[idx].[dataValueField]);
            }
        }

        [multiselect].value([multiselect].value().concat(result));
    }
}

Please note that the provided code excerpt is not tested, but shows a conceptual way to accomplish your specific business requirement.

Regards,
Georgi Krustev
Telerik

 

 

[Blake]

Georgi,

Thanks, this is helpful but the one key piece is knowing which item is highlighted.  For example, if I have two entries "Apple" and "Apple Pie" and I type "App" and then I manually highlight "Apple Pie" and hit TAB, I would like for "Apple Pie" to be selected.  With your code sample, it would just select "Apple" since it is the first one in the list.

Is there any way to programmatically tell which item is highlighted?  Essentially I just want TAB to work like Enter does out-of-the-box.

[Georgi Krustev]

Hello Blake,

You can get the currently highlighted item using the current method:

var item = [multiselect].current();

Method will return a jQuery instance of the current focused/highlighted item.

Regards,
Georgi Krustev
Telerik

 

 

[Blake]

Perfect! Thanks!