jQWidgets Forums

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

Tagged: , , , , ,

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
    remote search start with the enter key Posts
  • June 14, 2016 at 5:45 am remote search start with the enter key #85092

    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();
		      }
                });
    June 14, 2016 at 11:24 am remote search start with the enter key #85100

    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

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

You must be logged in to reply to this topic.