Question

我从Elasticsearch和AngularJS的教程中获得了这段代码。

在输入用户输入而不是将链接显示为建议时，尝试弄清楚如何让自动完成功能形成下拉列表中的建议列表。

这是html标记：

<ul class="suggestions" ng-show="showAutocomplete">
      <li ng-repeat="suggestion in autocomplete.suggestions" ng-show="suggestion.options.length > 0">
        <a href="#" ng-mousedown="searchForSuggestion()"><small>Search for &mdash;</small> {{suggestion.options[0].text}}</a>
<li ng-repeat="result in autocomplete.results">
    <a href="https://www.example.com/all/?search={{result._source.title}}">{{result._source.title}}</a>
  </li>

这是js：

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

  $scope.evaluateTerms = function(event) {
    var inputTerms = $scope.searchTerms ? $scope.searchTerms.toLowerCase() : null;

    if (event.keycode === 13) {
      return;
    }
    if (inputTerms && inputTerms.length > 3) {
      getSuggestions(inputTerms);
    }
    else if (!inputTerms) {
      $scope.autocomplete = {};
      $scope.showAutocomplete = false;
    }
  };

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

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

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

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

html标记中的第一个列表项提供了1个建议（以链接的形式），第二个列表项提供了链接列表作为建议。我喜欢多个建议的列表想法，但只想要文本短语而不是用户可以选择的链接。有什么想法吗？

Answer 1

这样的事情应该有效，但我没有你的对象结构所以我不得不在几个地方猜测。

<select class="" style="font-size: 12px"
   ng-options="suggestion.options[0].text as suggestion for suggestion in autocomplete.suggestions"
   ng-change="searchForSuggestion()"
   ng-show="suggestion.options.length > 0">
</select>

如何将自动填充建议列为文本而非链接

1 个答案: