jQWidgets Forums
jQuery UI Widgets › Forums › Lists › ComboBox › RemoteAutoComplete
Tagged: Angular combobox, bootstrap combobox, javascript combobox, jquery combobox, jqwidgets combobox, jqxComboBox
This topic contains 2 replies, has 2 voices, and was last updated by taskmate 8 years, 8 months ago.
-
AuthorRemoteAutoComplete Posts
-
Sir
When the remoteautocomplete is set to 2 and as soon as 2 charectors are typed / inserted , the request is fired and all the existing items are cleared.
The problem arises when
Suppose My existing list hasInde
Indo
India
IndiapolisIf I type ‘In’ then also the list is cleared and remote search is fired.
Would adding a property like ‘Send for search only if not in current list’ a option that could be implemented
Regards
Sanjay Gupta
Hello Sanjay Gupta,
You could use this workaround. Focus on the ‘search’ callback.
<!DOCTYPE html> <html lang="en"> <head> <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 dataAdapter = new $.jqx.dataAdapter(source, { formatData: function (data) { if ($("#jqxcombobox").jqxComboBox('searchString') != undefined) { data.name_startsWith = $("#jqxcombobox").jqxComboBox('searchString'); return data; } } } ); $("#jqxcombobox").jqxComboBox( { width: 250, height: 25, source: dataAdapter, remoteAutoComplete: true, autoDropDownHeight: true, selectedIndex: 0, displayMember: "name", valueMember: "countryName", renderer: function (index, label, value) { var item = dataAdapter.records[index]; if (item != null) { var label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")"; return label; } return ""; }, renderSelectedItem: function (index, item) { var item = dataAdapter.records[index]; if (item != null) { var label = item.name; return label; } return ""; }, search: function (searchString) { if (dataAdapter.records && dataAdapter.records.length > 0) { for (var i = 0; i < dataAdapter.records.length; i++) { var name = dataAdapter.records[i].name.toLowerCase(); searchString = searchString.toLowerCase(); if (name.indexOf(searchString) !== -1) { return; } } } dataAdapter.dataBind(); } }); }); </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>
This is based on ‘Remote search’ demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/remotesearch.htm?arcticBest Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi Hristov
Thanks
I works beutifully.
Regards
-
AuthorPosts
You must be logged in to reply to this topic.