【问题标题】:How to list autocomplete suggestions as text instead of links如何将自动完成建议列为文本而不是链接
【发布时间】:2015-07-02 15:38:56
【问题描述】:

我从我正在关注的 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 个建议(以链接的形式),第二个列表项给出一个链接列表作为建议。我喜欢多个建议的列表想法,但只想要文本短语而不是用户可以选择的链接。有什么想法吗?

【问题讨论】:

    标签: javascript autocomplete


    【解决方案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>
    

    【讨论】:

      猜你喜欢
      • 2011-08-24
      • 2020-05-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-01-16
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多