jQuery 自动完成功能未在 javascript 中显示数据

Question

我正在使用 AngularJS 和 Angular 8 开发混合应用程序。我正在尝试实现 jQuery 自动完成功能，该功能显示从 Api 获取的数据。 问题是数据是从 api 服务器获取的，但不知何故 jquery 自动完成功能不起作用。

HTML

<input type="text"
                        class="form-control"
                        placeholder="select assignee"
                        autocomplete="on"
                        ng-value="glPlmAsmt.owner[0].fullname"
                        ng-change="glPlmAsmt.checkOwner(glPlmAsmt.owner[0].fullname)"
                        ng-model="glPlmAsmt.owner[0].fullname"
                        id="edit-owner">


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

Javascript

  glPlmAsmt.checkOwner = function (ownerData) {
    debugger;
    if(ownerData.length > 2){
      glPlmService.searchOwnerInfo({ownerInfo:ownerData},(response)=>{
        debugger;
        console.log(response);
        $scope.ownerList = response.entities;
        $( "#edit-owner" ).autocomplete({
          source: $scope.ownerList
        });
      },(error)=>{
        debugger;
        console.log(error);
      })
    }
  }

知道我哪里做错了吗？

Answer 1

您将 AngularJS 与 jQuery 结合使用，请记住，在 AngularJS 摘要周期之外所做的更改（由 jQuery 所做的更改）可能不会在视图中显示，直到摘要周期再次运行。您必须使用 $scope.$apply() 手动触发摘要周期，但请谨慎执行此操作，以避免 $apply already inprogress 错误。

在初始化自动完成之前尝试执行此操作以检查数据格式是否正确

glPlmService.searchOwnerInfo({ownerInfo: ownerData}, (response) => {
    console.log(response);
    $scope.ownerList = response.entities.map(entity => {
        // Assuming each entity has a 'name' you want to display
        return { label: entity.name, value: entity.name };
    });

    // Ensure AngularJS updates the view
    $scope.$apply(() => {
        $("#edit-owner").autocomplete({
            source: $scope.ownerList
        });
    });
}, (error) => {
    console.log(error);
});

将映射调整为您的response.entities的结构。

我注意到的另一件事是，您使用的是相当旧版本的 jQuery (1.5) 和 jQuery UI (1.8.9)。 与较新的浏览器甚至在库中可能存在兼容性问题。尝试更新它，这可能会导致问题

您还可以尝试使用基于 AngularJS 的自动完成指令/库，该指令/库旨在与 AngularJS 配合使用：- angular-ui-bootstrap 的 typeahead

希望有帮助