jQuery自动完成无法正常工作

时间:2016-12-19 10:34:13

标签: javascript c# jquery angularjs jquery-ui-autocomplete

我在角度控制器上使用jQuery-UI自动完成功能。 在服务器端,我有MVC,C#6.0。

自动填充功能根本不起作用,没有任何显示。我已经用调试器检查了从服务器返回了多少结果 - 返回结果:

enter image description here

但GUI上没有任何反应。没有下拉列表,没有。控制台没有错误。

这是角度控制器/功能:

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!");
        })

      }
}

在服务器端,我已经包括:

 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");

这是.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 个答案:

没有答案