使用AngularJS搜索建议

Question

当您开始在搜索框中输入某些字词时，我正在尝试复制https://devart.withgoogle.com/上显示的建议。

对于我的HTML，我有：

<form ng-controller="SearchCtrl">
    <input name="q" ng-model="query" ng-keypress="querySuggest()" type="text">
    <div class="search__enhance">
        <span class="search__offset" ng-bind="suggestion.query"></span>
        <span class="search__suggestion" ng-bind="suggestion.text"></span>
    </div>
</form>

然后在我的控制器中我有：

myApp.controller('SearchCtrl', function($rootScope, $scope, $state, $location) {

    $scope.querySuggest = function () {

        var haystack = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Small Talk", "Scheme"];

        $scope.suggestion.query = '';

        $scope.suggestion.text = '';

    }

});

所以下一步是在输入中显示结果（分割用户键入的内容和建议内容）。

我感到困惑的是如何做到以下几点：

1. 显示搜索建议（减去search__suggestion span元素中输入的查询。
2. 在search__offset span元素中显示查询（我可以告诉他们不会在输入中显示值... ）
3. 将输入的查询与h​​aystack数组匹配。

对这三个人的任何想法？

Answer 1

放置一个单独的元素＆＃34;＆＃34;实际输入。使用该元素显示您将使用输入元素上的onchange侦听器获取的suggestiong。这照顾＃1和＃2。

对于＃3，你可以对大海捞针做一个简单的匹配。

---

这是一个完整的示例，请使用向右箭头确认建议：

＆＃13;

＆＃13;

angular.module('myApp', [])
  .controller('SearchCtrl', function($rootScope, $scope, $location) {

    $scope.suggestion = {};

    var haystack = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Small Talk", "Scheme"];

    $scope.querySuggest = function($event) {
      if ($event.keyCode == 39) {    // confirm suggestion with right arrow
        $scope.query = $scope.suggestion.text;
        return;
      }
      $scope.suggestion.text = '';
      for (var i = 0; i < haystack.length; i++) {
        if ($scope.query && haystack[i].indexOf($scope.query) === 0) {
          $scope.suggestion.text = haystack[i];
          console.log(haystack[i]);
          break;
        }
      }

    }

  });

＆＃13;

form {
  position: relative;
}
.search__suggestion {
  font: normal normal normal 14px/normal Arial;
  position: absolute;
  left: 2px;
  top: 3px;
  color: #aaa;
  z-index: -1;
}
input {
  font: normal normal normal 14px/normal Arial;
  background: transparent;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form ng-app="myApp" ng-controller="SearchCtrl" autocomplete="off">
  <input name="q" ng-model="query" ng-keyup="querySuggest($event)" type="text">
  <div class="search__enhance">
    <span class="search__suggestion" ng-bind="suggestion.text"></span>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;