Question

我正在尝试弄清楚如何从建议数组中显示最多10个选项，然后让用户选择该选项，该选项现在成为搜索查询？

Html和AngularJS：

<ul class="suggestions" ng-show="showAutocomplete">
  <li ng-repeat="suggestion in autocomplete.suggestions" ng-show="suggestion.options.length > 0" ng-mousedown="searchForSuggestion()"><small>Searching &mdash;</small>
    {{suggestion.options[0].text}}//how to display up to 10 options
  </li>
</ul>

建议数组

$scope.autocomplete = {
    suggestions: []
};
$scope.showAutocomplete = false;

JS：

$scope.searchForSuggestion = function() {
    $scope.searchTerms = $scope.autocomplete.suggestions[0].options[0].text;
    $scope.search();
    $scope.showAutocomplete = false;
};

更多JS：

var getSuggestions = function(query) {
  searchService.getSuggestions(query).then(function(es_return) {
    var suggestions = es_return.suggest.phraseSuggestion;

    if (suggestions.length > 0) {
      $scope.autocomplete.suggestions = suggestions;
    }
    else {
      $scope.autocomplete.suggestions = [];
    }

    if (suggestions.length > 0) {
      $scope.showAutocomplete = true;
    }
    else {
      $scope.showAutocomplete = false;
    }
  });
};

建议是映射到$ scope.autocomplete对象的数组。我正在使用ES的PhraseSuggestion，而options是PhraseSuggestion对象中的一个数组。 Text是PhraseSuggestion对象中options数组的实际选项。

我希望这会让它更清晰一些 - 我对AngularJS有点新鲜并且还在学习它。

更新我应该能够在getSuggestions函数中包含我正在寻找的功能，对吧？只是稍微调整一下if语句......然后真正归结为显示，如何在选项数组中显示多达10条建议

Answer 1

我认为您可能希望使用带有ng-repeat过滤器的嵌套limitTo。

我已经整理了一个关于如何使用limitTo ng-click在您填充的选项http://plnkr.co/edit/8Mh... {/ p>}上的用户。

如果选择一个选项会改变建议，那应该没问题，并相应地更新视图。

希望能帮到你！

如何在AngularJS中显示数组中的搜索建议

1 个答案: