angularjsでオートコンプリートを使用する方法

Question

私は友人機能を追加したアプリケーションを持っています。その機能では、ユーザーはテキストボックスに友人のユーザー名を記入する必要があります。これはhtmlコードです：

<div content-for="title"> 
    <span>Add Friend</span> 
</div> 
<form class="form-inline" role="form"> 
    <div class="form-group"> 
     <label class="sr-only" for="exampleInputEmail2">User ID</label> 
     <input type="text" class="form-control" data-ng-model="add.email" id="exampleInputEmail2" placeholder="User ID"> 
    </div> 
     <button type="submit" class="btn btn-default" data-ng-click="addfriends()">Add</button> 

the interface will be like this

と、これはjsのコードです：私はこの機能を少し変更したい

// addfriend 
    $scope.add = {}; 
    $scope.addfriends = function(){ 
     $scope.messages = { 
      email  : $scope.add.email, 
      userid  : $scope.datauser['data']['_id'] 
     }; 
      //event add friend 
     socket.emit('addfriend',$scope.messages,function(callback){ 
      if(!callback['error']){ 
       $scope.datauser['data']['penddingrequest'].push(callback['data']); 
        //push pendding request to localstorage user 
       localStorageService.remove('user'); 
       localStorageService.add('user', $scope.datauser); 

       $scope.add['email'] = ''; 
       alert('Successfully added friend'); 
      }else{ 
       var msg = callback['error']; 
       navigator.notification.alert(msg,'','Error Report','Ok'); 
      } 
     }); 
    }; 

、私はこれを作りたいです入力に基づいていくつかの提案を示すテキストボックス。ユーザー入力 'a'のように、テキストボックスには 'a'で始まるすべてのユーザーIDが表示されます。 twitterのsearchboxやinstagramの検索ボックスのようなもの。これらのユーザーIDはデータベースからのものです。 example searchbox of web instagram

私の質問は、オートコンプリートになるこのテキストボックスを変更するが、まだ前のように動作する方法ですか？大変ありがとうございます

Answer 1

これを行う方法はたくさんあります。

最初はこれです。基本的には、inputのAngularディレクティブを作成します。 http://jsfiddle.net/sebmade/swfjT/

行う別の方法は、あなたのinputにonKeyUpイベントを添付することです：

<div class="form-group"> 
    <label class="sr-only" for="exampleInputEmail2">User ID</label> 
    <input type="text" class="form-control" data-ng-model="add.email" id="exampleInputEmail2" placeholder="User ID" ng-keyup="searchFriends()"> 
    <div ng-model="searchFriendsResult" /> 
</div> 

そして、あなたのcontrollerに、あなたは意志searchFriends機能作成：

1. は、データベースを検索します
2. 結果をビューに表示します。

この（ない完全なコード）のような何か：

$scope.searchFriends = function(value){ 
    // Make Ajax call 
    var userRes = $resource('/user/:username', {username: '@username'}); 
    userRes.get({username:value}) 
     .$promise.then(function(users) { 
      $scope.searchFriendsResult = users; 
     }); 
}; 

Answer 2

使用Bootstrap Typeahead

<input type="text" ng-model="asyncSelected" 
        placeholder="Locations loaded via $http" 
        uib-typeahead="address for address in getLocation($viewValue)" 
        typeahead-loading="loadingLocations" 
        typeahead-no-results="noResults" 
        class="form-control"/>