jQuery UI Widgets › Forums › Plugins › AngularJS › Angular ComboBox Remote Search
Tagged: Angular, Angular combobox, angularjs, combobox, get property, jqx-settings, jqxComboBox, remoteSearch, searchString
This topic contains 4 replies, has 2 voices, and was last updated by medtrak 8 years, 8 months ago.
-
Author
-
Hello,
I have created a directive for the angular combo box but I can’t get the remote search feature to work. When the dataAdapter.dataBind() event fires, it does jump into the “formatData” function of the data adapter. However, each time, the data.search is null.
I have tried $scope.diagnosisSettings.apply(‘searchString’) and $scope.diagnosisSettings.jqxComboBox(‘searchString’) and both return null. From what I can tell I am calling everything correctly. I am able to hard code data.search = “123” and it acts correctly so the problem is getting the searchString value.
Please advise. All related code is below.
Thank you.
**DIRECTIVE
var eligPortalDiagnosisList = function () {
return {
restrict: ‘E’,
scope: {
ngModel: ‘=’
},
templateUrl: ‘/pages/diagnosis-list.html’,
controller: DiagnosisController
};
}**DIRECTIVE TEMPLATE
<div>
<jqx-combo-box jqx-create=”createDiagnosisWidget” ng-model=”ngModel” jqx-settings=”diagnosisSettings”></jqx-combo-box>
</div>**CONTROLLER
var DiagnosisController = function ($scope) {
// hide widget on page load
$scope.createDiagnosisWidget = false;
var dataAdapter = new $.jqx.dataAdapter(
{
datatype: ‘json’,
datafields:
[
{ name: ‘DiagnosisCode’ },
{ name: ‘DiagnosisDescription’ }
],
url: ‘/Helper/GetDiagnosisList’
},
{
autoBind: true,
formatData: function (data) {
if ($scope.diagnosisSettings != null && $scope.diagnosisSettings != undefined) {
data.search = $scope.diagnosisSettings.apply(‘searchString’);
}
return data;
}
}
);
$scope.diagnosisSettings = {
source: dataAdapter,
displayMember: “DiagnosisDescription”,
valueMember: “DiagnosisCode”,
width: ‘100%’,
remoteAutoComplete: true,
minLength: 2,
renderer: function(index, label, value) {
return value + ” – ” + label;
},
renderSelectedItem: function(index, item) {
return item.value + ” – ” + item.label;
},
search: function(searchString) {
dataAdapter.dataBind();
}
};
// show widget
$scope.createDiagnosisWidget = true;
}Hello medtrak,
The following is not a correct way of getting the searchString property:
$scope.diagnosisSettings.apply('searchString');
Please try the following modification to your code:
formatData: function(data) { if ($scope.diagnosisSettings != null && $scope.diagnosisSettings != undefined) { data.search = $scope.diagnosisSettings.jqxComboBox('searchString'); } return data; }
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks for the reply. However, as stated in my original post, I have tried that and still get an empty value for data.search
If I put an id on the <jqx-combo-box> element in the directive, then I am able to get the value by using data.search = $(‘#id’).jqxComboBox(‘searchString’);
However, I do not want to do that because I have two of these directives on my page.That leads me to believe there is something wrong with the $scope or the diagnosisSettingsproperty.
Is there anything else that I can try?
Thanks so much!
Hi medtrak,
I am not sure what causes the issue you experience. Here is a complete, working, example, based on the jQuery-only demo Remote Search, but using AngularJS instead. Please review it and check for any inconsistencies with your own code. Please also make sure you are using the latest version of jQWidgets (4.0.0).
<!DOCTYPE html> <html ng-app="demoApp" lang="en"> <head> <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <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="../../../scripts/demos.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="../../../jqwidgets/jqxangular.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { 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) { var searchString = $scope.comboboxSettings.jqxComboBox('searchString'); if (searchString != undefined) { data.name_startsWith = searchString; return data; } } }); // Create a jqxComboBox $scope.comboboxSettings = { 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) { dataAdapter.dataBind(); } }; }); </script> </head> <body ng-controller="demoController"> <jqx-combo-box jqx-settings="comboboxSettings"></jqx-combo-box> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you. Upgrading to v4.0.0 did the trick.
-
AuthorPosts
You must be logged in to reply to this topic.