Combobox Keyboard Navigation...

[2plus2]

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?

[stworthy]

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>

[2plus2]

Danka!

[2plus2]

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?

[stworthy]

        $('#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;
		}
	});

[2plus2]

Doh! That what I get for implementing without really understanding.

Thanks.