jQWidgets Forums
jQuery UI Widgets › Forums › Lists › ComboBox › remote search start with the enter key
Tagged: Angular combobox, bootstrap combobox, javascript combobox, jquery combobox, jqwidgets combobox, jqxComboBox
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
-
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(); } });
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 HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.