EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: 2plus2 on April 09, 2013, 03:46:19 PM



Title: Combobox Keyboard Navigation...
Post by: 2plus2 on April 09, 2013, 03:46:19 PM
Howdy...

We'd like the Combobox to respond more like a standard dropdown when it comes to keyboard input. You can navigate to a combobox via the tab key, but the dropdown is not activated by the down arrow, and you can't use the down/up arrows to highlight an option and then hit enter to select it.

Our client is very keyboard oriented when it comes to data entry and would like to use just their keyboard to enter data on the form. Is this built in, and just needs to be turned on? Or am I going to have to trap for key events and act appropriately?

Is there a way to fire the combo box panel display dynamically?


Title: Re: Combobox Keyboard Navigation...
Post by: stworthy on April 09, 2013, 06:36:43 PM
The 'selectOnNavigation' property is supported to allow the user to highlight and press enter to select a item since version 1.3.3. You can download the updated combobox plugin from http://www.jeasyui.com/easyui/plugins/jquery.combobox.js. To enable the navigation feature, set 'selectOnNavigation' property to false.

Code:
<select class="easyui-combobox" style="width:200px;" data-options="selectOnNavigation:false">
...
</select>


Title: Re: Combobox Keyboard Navigation...
Post by: 2plus2 on April 10, 2013, 04:57:03 PM
Danka!


Title: Re: Combobox Keyboard Navigation...
Post by: 2plus2 on April 11, 2013, 05:27:32 PM
FYI...

New feature works great with a remote URL that loads the data, but I'm seeing issues with data loaded locally:

        $('#IsActive').combobox({
            panelHeight:'auto',
            width:133,
            selectOnNavigation:false,
            valueField:'value',
            textField:'label',
            data: [{ label: 'Yes', value: 'Yes', selected: true }, { label: 'No', value: 'No'}],
            filter: function (q, row) {
                return row.text.toLowerCase().indexOf(q.toLowerCase()) == 0;
            }
        });

When I navigate to the target combobox above, and wipe out the existing value - I can't use the down arrow to activate the drop down. Nor does the type ahead work.

This one works fine:

        $('#Controller').combobox({
            url: '/admin/ajaxOwners.aspx?a=getComboList&t=Controller',
            selectOnNavigation: false,
            valueField: 'id',
            textField: 'text',
            filter: function (q, row) {
                return row.text.toLowerCase().indexOf(q.toLowerCase()) == 0;
            }
        });

Ideas? Did I setup the IsActive combobox incorrectly?


Title: Re: Combobox Keyboard Navigation...
Post by: stworthy on April 11, 2013, 06:39:00 PM
        $('#IsActive').combobox({
            panelHeight:'auto',
            width:133,
            selectOnNavigation:false,
            valueField:'value',
            textField:'label',
            data: [{ label: 'Yes', value: 'Yes', selected: true }, { label: 'No', value: 'No'}],
            filter: function (q, row) {
                return row.text.toLowerCase().indexOf(q.toLowerCase()) == 0;
            }
        });

You have defined a text field named 'label' however you used the 'text' field in your filter function. Please try to use the code below:
Code:
	$('#IsActive').combobox({
panelHeight:'auto',
width:133,
selectOnNavigation:false,
valueField:'value',
textField:'label',
data: [{ label: 'Yes', value: 'Yes', selected: true }, { label: 'No', value: 'No'}],
filter: function (q, row) {
return row.label.toLowerCase().indexOf(q.toLowerCase()) == 0;
}
});


Title: Re: Combobox Keyboard Navigation...
Post by: 2plus2 on April 12, 2013, 08:09:21 AM
Doh! That what I get for implementing without really understanding.

Thanks.