This is a migrated thread and some comments may be shown as answers.

TAB key support?

4 Answers 159 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Blake
Top achievements
Rank 1
Blake asked on 18 Jul 2014, 09:07 PM
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

4 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 21 Jul 2014, 11:44 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Blake
Top achievements
Rank 1
answered on 22 Jul 2014, 03:51 PM
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.
0
Accepted
Georgi Krustev
Telerik team
answered on 23 Jul 2014, 10:36 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Blake
Top achievements
Rank 1
answered on 23 Jul 2014, 06:54 PM
Perfect! Thanks!
Tags
MultiSelect
Asked by
Blake
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Blake
Top achievements
Rank 1
Share this question
or