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 범위 요소에 입력 한 쿼리를 표시
2. 쿼리에서보기 search__offset span 요소 (입력 값 자체에 값을 표시하지 않을 수도 있음 ...)
3. 입력 된 쿼리를 haystack 배열과 일치시킵니다.

이 세 가지 아이디어가 있습니까?

Answer 1

실제 입력 뒤에 "별도의 요소"를 붙이십시오. 입력 요소에 onchange 리스너를 사용하여 가져올 제안을 표시하려면 해당 요소를 사용하십시오. 그것은 # 1과 # 2를 처리합니다.

# 3의 경우 건초 더미에 대해 간단한 일치를 수행 할 수 있습니다.

---

여기 완전 작업 예제, 제안을 확인하기 위해 오른쪽 화살표를 사용

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; 
 
     } 
 
     } 
 

 
    } 
 

 
    });

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; 
 
}

<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>