watsappの機能のように@をテキストボックスに入力してリストされたオプションを取得する

Question

この機能を実装する方法は、テキストボックスに@を入力し、選択タグオプションのように選択するオプションのリストを取得する方法は、 APIから。 私はこれが1.xxの

が1より http://podio.github.io/jquery-mentions-input/ を見つけることjqueryのhttp://jakiestfu.github.io/Mention.js/を使用していますが、あなたがオートコンプリートを使用することができますangularjs

Answer 1

と同じことをしたいと思い、このリンクを持っangularjsを使用して行うことができるか見当もつかないコンポーネントを使用してこの問題を実装します。

AngularJS材質オートコンプリート：

https://material.angularjs.org/latest/demo/autocomplete

Answer 2

角度

.controller('namesCtrl', ['$scope', '$rootScope', '$http', '$filter', 
     function ($scope, $rootScope, $http, $filter) { 
      $scope.names = $filter('orderBy')($scope.names, 'last_name', 'first_name'); 
      $scope.query = {} 
      $scope.queryBy = '$' 
      $scope.orderProp = "last_name"; 

    }]) 

HTMLテンプレート

<ng-controller="namesCtrl"> 
<table> 
     <tr> 
      <td align="right">Search </td> 
      <td><input ng-model="query[queryBy]" /></td> 
     </tr> 
    </table> 
    <div class="searchresults" ng-show="names.length" ng-repeat="name in names | orderBy : 'name.last_name' | filter:query as filtered"> 
    {{name.first_name}} {{name.last_name}} 
    </div> 
</ng-controller> 

CSSは

.searchresults { 
    padding: 4px 8px; 
    background-color: aliceblue; 
    color: navy; 
    font-size: 75%; 
    position: relative; 
    z-index: 20; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222; 
    -webkit-box-shadow: 0px 0px 4px #222; 
    box-shadow: 0px 0px 4px #222; 
} 

（@symbolを使用していない私のソリューションは、それは名前だけのテキストを検索します。そして、私は角度フィルタリングに関する別のStackOverflow質問から多くを得ました）