Combobox Default selection changed when click outside

[jusmasParticipant]

Hi,

I have a combo box as seen in http://jsfiddle.net/smbzbj66/3/

The problem is that
– put cursor inside the box and type ‘IN’, so that the box will show entries start with ‘IN’.
– Select any one starting with ‘IN’ using mouse. So, the selected item will be India or Indonasia.
– simply click the mouse anywhere in the screen outside the combobox, or just press the tab button. Now you will see the selected item will change to something else.

The sample script handle CHANGE/SELECT events and the BLUR event of the typing box and show which all event trigger, and also showing the ‘selectedIndex’ at that time. [C] indicate a Change event [S] indicate a SELECT event. [z] indicate any event just before going to further conditions

Can you tell me why the default selection changes when clicking outside the box?
This happens only if you type in something first and selecting by keyboard or mouse and then TAB or click outside. The issue wont happen if selecting the item using mouse from pull down menu.
Also you can see the event z1/z2/z3 in this example always show a different index as selected one. Why so?

[Peter StoevKeymaster]

Hi jusmas,

In your code, the problem is that on change, you call a method for selecting an item. That’s why this behavior happens on your side and does not happen in our demos.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jusmasParticipant]

well, i figured out this happen because of the following line in the BLUR event routine of the input box.

$("#cities").jqxComboBox('selectIndex',$("#cities").jqxComboBox('selectedIndex'));

The purpose of this line was I was trying to select the already selected item if user select one and continue typing some characters but there is no matching item in the list. In such case, in the lost Focus it will select the same exact item which was last selected, and marked as selected at that time.

If I remove that code, it works, but the above characteristics wont be there.

Whats your idea?

[Peter StoevKeymaster]

Hi jusmas,

blur is raised when the focus goes from the ComboBox to some other HTML Element. With auto-complete mode, you should probably use the “value” selection methods instead because the index in that case is variable and depends on which items are visible and which are not.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jusmasParticipant]

Hi Peter,

What I wanted is : I am selecting an item from the list. Then at the end of the label I am type in few more characters but nothing there in the list matching to the present label. In that situation, if I press tab or click on anything else, the label should be set back to the label of last selected item.
In the example i shown, in the “[B3]” section in BLUR I am doing like

if ($("#cities").jqxComboBox('selectedIndex')!=-1){
     var item = $("#cities").jqxComboBox('getSelectedItem');
     $("#cities").jqxComboBox('selectIndex',item.index);
     $("#cities input").val(item.label);
     $('#mystat').text($('#mystat').text() + " [B3]" + $('#cities').jqxComboBox('selectedIndex'));
}

but the label does not change as i expected. Can you give me a code sample to make it possible please? The ultimate goal is that to make sure user selects and see only valid items which are existing in the list.

Thanks….

[Peter StoevKeymaster]

Hi jusmas,

If you want to prevent your users from selecting a wrong item or nothing, why don’t you just use a DropDownList instead of ComboBox?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts