Question

所以这适用于静态数据，但是当我用$ http推送数据时，这个自动完成功能不起作用。数据推送到airport_list的空数组，但是当我尝试使用airport_list进行自动完成时，会发生一些事情。不确定是什么。我只能找到与静态数据有关的答案。

根据每个人的帮助更新。

这是控制器

 app.controller('selectCtrl', function($scope, $http) {
   $scope.airport_list = null;
    $http({
     url: 'someUrl.com',
     method: 'GET'
    })
    .then((response) => {
      angular.forEach(response.data.airports, function(value, key) {
      $scope.airport_list = response.data.airports;
    })
    $scope.airports = $scope.airport_list;
  });
  $scope.selectAirport = function(string) {
   $scope.airport = string;
   $scope.hidelist = true;
 };
})

这是模板

<div class="control">
  <div>
    <input
      type="text"
      name="airport"
      id="airport"
      ng-model="airport"
      ng-change="searchFor(airport)"
      placeholder="From..."
    />
    <div class="airport-container-dropdown" ng-hide="hidelist">
      <div 
        class="airport-list" 
        ng-repeat="airport in airports" 
        ng-click="selectAirport(airport)"
      >
        {{ airport.name }}
      </div>
    </div>
  </div>
</div>

我真的很想在没有使用bootstrap typeahead的情况下这样做。谢谢你看这个。

我按照以下答案的建议进行了更改，$ http请求作为整个列表输入自动完成，但按名称搜索无效并点击名称集[object，object]

这将是特定于该功能的代码。

$scope.searchFor = function(string) {
$scope.hidelist = false;
const output = [];
angular.forEach($scope.airport_list, function(airport) {
  if (airport[0].toLowerCase().indexOf(string.toLowerCase(airport)) >= 
  0) {
    output.push(airport);
  }
});
$scope.airports = output;
};
$scope.selectAirport = function(string) {
  $scope.airport = string;
  $scope.hidelist = true;
};

Answer 1

试试这个：

$scope.airport_list = response.data.airports;

我所看到的是你有一个数组：$scope.airport_list = [];

当您发出http请求时，您将我理解的机场阵列推送到该阵列中。因此，您最终会在$scope.airport_list的第一个位置从后端获得机场阵列，而$scope.airport_list是实际列表。

对于您的搜索方法，您应该更改以下内容：

在您的HTML中：

ng-change="searchFor(airport.name)"

在你的JS中：

我已重命名您的函数并更改输入变量以使其更清晰。你正在一个完整的机场，但把它当作一个字符串。您需要将提供的机场名称与阵列中的机场名称进行比较。因此，您遍历数组，并将每个元素的name属性与传入的内容进行比较。

$scope.searchFor = function(airportName) {
    $scope.hidelist = false;
    const output = [];
    angular.forEach($scope.airport_list, function(airport) {
        if (airport.name.toLowerCase() === airportName) {
            output.push(airport);
        }
    });
    $scope.airports = output;
    console.log($scope.airports);
};

我为您的代码提供了最少的更改以实现此功能，但我建议您查看此SO帖子以更恰当地过滤下拉数据。

Angularjs Filter data with dropdown

如果您只想过滤掉用户界面中显示的内容，可以在HTML模板中尝试此操作。它将提供一个文本字段，您可以在其中提供机场名称的一部分。如果在该框中输入了至少一个字符，则列表将显示在页面上，并应用适当的过滤。这将避免必须在更改时调用函数，具有单独的数组等。

<input type="text" name="airport" id="airport" ng-model="airportSearch.name" placeholder="From..." />

<div class="airport-container-dropdown" ng-hide="!airportSearch.name">
  <div class="airport-list"
      ng-repeat="airport in airport_list | filter:airportSearch"
      ng-click="selectAirport(airport)">
    {{ airport.name }}
  </div>
</div>

AngularJs自动完成搜索

1 个答案: