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

我想稍微改变这个功能，我想让这个文本框根据输入显示一些建议，比如用户输入＆＃39; a＆＃39;，文本框将显示以＆开头的所有用户ID ＃39;一个＆＃39 ;.比如twitter的搜索框或Instagram搜索框。这些用户ID来自数据库。 example searchbox of web instagram

我的问题是如何将此文本框更改为自动完成但仍然像以前一样工作？非常感谢

Answer 1

有很多方法可以做到这一点。

首先是这一个：您基本上为input创建了Angular指令。 http://jsfiddle.net/sebmade/swfjT/

另一种方法是将onKeyUp个事件附加到input：

<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函数，该函数将：

搜索您的数据库
在视图中显示结果。

像这样的东西（不是完整的代码）：

$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"/>

如何在angularjs

2 个答案: