I am using jQuery-UI autocomplete on angular controller. On the server side I have MVC, C# 6.0.
Autocomplete simply doesn't work, nothing shows up. I've checked with debugger how many results are returned from server - results are returned:
But nothing happens on the GUI. No drop down list showed up, nothing. No error in the console.
Here is angular controller / function:
angular.module("calendarDefinitionModule")
.controller("calendarDefinitionController", ["$scope", "$http", function ($scope, $http) {
$scope.UrlDeliveryListPaging = null;
$scope.SearchResults = null;
$scope.SearchDishSemiDishMerc = function (srt) {
if ($(event.currentTarget) === null || $(event.currentTarget).val().length < 3) {
return;
}
var objTrigger = event.currentTarget;
$http({
method: "POST",
url: $scope.UrlDeliveryListPaging,
data: {
cSEARCH_STRING: $(event.currentTarget).val(),
cSEARCH_DISH: srt === 'dish' ? '1' : null,
cSEARCH_SEDI: srt === 'semidish' ? '1' : null,
cSEARCH_MERC: srt === 'merc' ? '1' : null
}
}).then(function success(response) {
if (response.data === null) {
return;
}
$scope.SearchResults = [];
var i;
for (i = 0; i < response.data.length; ++i) {
var iKEY = srt === 'dish' || srt === 'semidish' ? response.data[i]["iDISH_KEY"] : response.data[i]["iMERC_KEY"];
var item =
{
iDISH_KEY: response.data[i]["iDISH_KEY"],
iMERC_KEY: response.data[i]["iMERC_KEY"],
iKEY: iKEY,
cDICA_NME: response.data[i]["cDICA_NME"],
cDICA_UNI: response.data[i]["cDICA_UNI"],
cSEARCH_RESULT: response.data[i]["cDICA_NME"] + " ID: " + iKEY
}
$scope.SearchResults.push(item);
}
$(objTrigger).autocomplete({
source: $scope.SearchResults,
select: function (event, ui) {
$(objTrigger).val(ui.item.cSEARCH_RESULT);
$(objTrigger).parent().parent().find("#inputDish_ID").val(ui.item.iKEY);
$(objTrigger).parent().parent().find("inputDish_UNI").val(ui.item.cDICA_UNI);
}
});
}, function failure() {
alert("Napaka pri iskanju!");
})
}
}
On the server side I've included:
ScriptBundle scriptsControllerDefinition = new ScriptBundle("~/scripts/ControllerDefinition");
scriptsControllerDefinition.Include("~/static/scripts/jquery-1.11.0.min.js");
scriptsControllerDefinition.Include("~/static/jquery.ui/js/jquery-ui-1.10.4.custom.js");
scriptsControllerDefinition.Include("~/Scripts/angular.js");
scriptsControllerDefinition.Include("~/Scripts/Angular/CalendarDefinition/calendarDefinitionModule.js");
scriptsControllerDefinition.Include("~/Scripts/Angular/CalendarDefinition/calendarDefinitionController.js");
And here is .cshtml:
<div class="form-group col-sm-12">
<label for="addDish" class="col-sm-2 control-label" style="padding-left:0;">Dodaj jed: </label>
<div class="col-sm-10">
<table id="tblDishes" style="width:100%;border-collapse:collapse;">
<tbody>
<tr id="1">
<td>
<div class="col-sm-2" style="padding-left:0;padding-right:0;">
<input id="inputDish_ID" type="text" class="form-control" placeholder="ID" readonly />
</div>
<div class="col-sm-7" style="padding-right:0;">
<input id="inputDish_NME" type="text" class="form-control" placeholder="Vnesite jed" ng-keyup="SearchDishSemiDishMerc('dish');" />
</div>
<div class="col-sm-1" style="padding-right:0;">
<input id="inputDish_UNI" type="text" class="form-control" placeholder="Enota" readonly />
</div>
<div class="col-sm-1" style="padding-right:0;">
<input id="inputDish_QUA" type="text" class="form-control bfh-number" placeholder="Količina" />
</div>
<div class="col-sm-1" style="padding-right:0;">
<span class="glyphicon glyphicon-plus add-new-dish pull-left" style="font-size:18px;color:green;cursor:pointer;padding-top:1px;"></span>
<span class='glyphicon glyphicon-trash delete-dish pull-right' style='font-size:18px;color:red;cursor:pointer;padding-top:1px;'></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div><br />