jQWidgets Forums

jQuery UI Widgets Forums Lists ComboBox remote search start with the enter key

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 8 years, 9 months ago.

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

  • alorenz
    Participant

    Hi,

    I’m using the combobox with the autocomlete feature and the remote search.

    If I type somthing, all works fine.

    But if I copy somthing in the Inputfield, nothing goes..

    So Iwant to implement this with typing the “Enter”-Key.

    This works, but allways after the “enter” Key is pushed twice.

    var trackSource ={
                    datatype: "json",
                    datafields: [
                    { name: 'kd_key' , type: 'number'},
                    { name: 'kd_nr' , type: 'number'},
                    { name: 'kd_name' , type: 'string'}                
                    ],
    			    type: "GET",
    			    url: 'model/norad_kunden.php',
    				};
                
    			  
    			   var dataAdapter1 = new $.jqx.dataAdapter(trackSource,
                                {						
                                    formatData: function (data) {
                                      if ($("#kd_nummer").jqxComboBox('searchString') != undefined ) {
                            	      data.kd_nr = $("#kd_nummer").jqxComboBox('searchString');
    	 			      return data;
    				      }
    				}
    			     });
    
           
                  $("#kd_nummer").jqxComboBox({
                    source: dataAdapter1,
                    theme: 'fresh',
                    height: 20,
    		width: 500,
    		remoteAutoComplete: true,
    		minLength: 	3,
    		selectedIndex: -1,
    		placeHolder: " Kunden Nummer  ..." ,
    		displayMember: "kd_nr",
                    valueMember: "kd_key",
    		search: function (searchString) {
    		  dataAdapter1.dataBind();
    		},
    		searchMode:'containsignorecase',
    		autoComplete:true
    		});
    				
    		
                 $("#kd_nummer input").on('keydown', function (event) {
                        if (event.keyCode == 13) {
    			dataAdapter1.dataBind();
    		      }
                    });
    

    Hristo
    Participant

    Hello alorenz,

    Please, take a look this example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>Example.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var source =
                {
                    datatype: "jsonp",
                    datafields: [
                        { name: 'countryName' },
                        { name: 'name' },
                        { name: 'population', type: 'float' },
                        { name: 'continentCode' },
                        { name: 'adminName1' }
                    ],
                    url: "http://api.geonames.org/searchJSON",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        username: "jqwidgets"
                    }
                };
                var flag = true;
                var dataAdapter = new $.jqx.dataAdapter(source,
                    {
                        formatData: function (data) {
                            if ($("#jqxcombobox").jqxComboBox('searchString') != undefined) {
                                data.name_startsWith = $("#jqxcombobox").jqxComboBox('searchString');
                                return data;
                            }
                        }
                    }
                );
                
                $("#jqxcombobox").jqxComboBox(
                {
                    source: dataAdapter,
                    theme: 'fresh',
                    height: 20,
                    width: 500,
                    remoteAutoComplete: true,
                    minLength: 3,
                    selectedIndex: -1,
                    placeHolder: " Kunden Nummer  ...",
                    displayMember: "name",
                    valueMember: "countryName",
                    search: function (searchString) {
                        dataAdapter.dataBind();
                    },
                    searchMode: 'containsignorecase',
                    autoComplete: true
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <span>Search for a City:</span>
            <div style="margin-top: 7px; margin-bottom: 5px;" id="jqxcombobox"></div>
            <span>ex: be</span>
        </div>
    </body>
    </html>
    

    Best Regards,
    Hristo Hristov

    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.