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! - -

Telerik Forums / Kendo UI for jQuery Forum / MultiSelect /

TAB key support?

Kendo UI
Resources Buy Try

5 posts, 1 answers

Blake

14 posts

Member since:
Jun 2010

Posted 18 Jul 2014 Link to this post

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
Admin

3747 posts

Posted 21 Jul 2014 Link to this post

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!
Blake

14 posts

Member since:
Jun 2010

Posted 22 Jul 2014 in reply to Georgi Krustev Link to this post

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.
Answer
Georgi Krustev
Admin

3747 posts

Posted 23 Jul 2014 Link to this post

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!
Blake

14 posts

Member since:
Jun 2010

Posted 23 Jul 2014 in reply to Georgi Krustev Link to this post

Perfect! Thanks!