jQuery autocomplete not working

312 views Asked by At

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:

enter image description here

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 />
0

There are 0 answers