jQWidgets Forums

jQuery UI Widgets Forums General Discussions Lists ComboBox select item when user types code in combo

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 11 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • select item when user types code in combo #46778

    damc
    Participant

    Hi.

    There is a problem when user take steps like below:
    1. Select code from list box: for example 2
    2. Click into combo and with backspace deletes code 2 and with keyboard press 3 and select item three from list box
    3. Press button and code to select item does not work.
    Problem is when user types code into combo.

    Sample code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title id='Description'>Test ComboBox</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    	<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>	
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var theme = "";
                    var source = new Array();
                    for (i = 0; i < 6; i++) {
                        var code = '0';
                        var value = 'value 0';
    
                        switch (i) {
                            case 1:
                                code = '1';
                                value = 'value 1';
                                break;
                            case 2:
                                code = '2';
                                value = 'value 2';
                                break;
                            case 3:
                                code = '3';
                                value = 'value 3';
                                break;
                            case 4:
                                code = '4';
                                value = 'value 4';
                                break;
                            case 5:
                                code = '5';
                                value = 'value 5';
                                break;
                        }
                        source[i] = { code: code, value: value };
                    }
    
    				var sourceTD = {
    					localdata	: source,
    					datatype	: 'array'
    				};
    				
    				indexToSelect = -1;
    				
    				var daTD = new $.jqx.dataAdapter(sourceTD);
    
    				$('#jqxcombo').jqxComboBox({
    					source			: daTD,
    					selectedIndex	: indexToSelect,
    					animationType	: 'none',
    					width			: 149,
    					height			: 22,
    					dropDownWidth	: 700,
    					displayMember	: 'code',
    					valueMember		: 'code',
    					placeHolder		: 'Vnesi ...',
    					autoComplete	: true,
    					renderer		: function (index, label, value) {
    						var item = source[index];
    						if (item != null) {
    							return item.code + ' - ' + item.value;
    						}
    						
    						return '';
    					}
    				});
    				
    				$('#input').val('');
    
    				$('#jqxcombo').on('select', function (event) {
    					var args = event.args;
    					if (args) {
    						var item = args.item;
    						if (item && item.originalItem) {
    							$('#input').val(item.originalItem.code + ' - ' + item.originalItem.value);
    						}
    					}
    				});
    				
    				$('#jqxButton').jqxButton({ width: '150', theme: theme });
    				
    				// set selected item on 5
    				$('#jqxButton').on('click', function () {
                       $('#jqxcombo').jqxComboBox('selectIndex', 5);
    				   alert('selected item must be 5');
                    });
               });
            </script>
            <div id='jqxcombo'></div>
    		<br />
    		<div>
    			<input id="input" type="text" />
    		</div>	
    		<br />
    		</div>
    			<input type="button" value="Button" id='jqxButton' />
    		</div>	
        </div>	
    </body>
    </html>

    Regards,
    Damc

    select item when user types code in combo #46798

    Dimitar
    Participant

    Hello Damc,

    Thank you for your feedback. We confirm the reported issue and will fix it as soon as possible. It is related to the autoComplete property and if you set it to false, everything should work fine.

    Best Regards,
    Dimitar

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.