需要引入selecte2.js、selecte2.css、selecte2-bootstrap.css。

HTML

<div>
   <input type="text" name="timeout" ng-model="name" class="form-control toSreach" 
   ng-change="getSearch(name)" 
   id="{{myId}}" 
   placeholder="请输入查询关键字" 
   autocomplete="off" 
   ng-blur="onBlur()"/>
   <ul ng-if="selectFlag" class="selectDiv">
       <li ng-repeat="data in myDatas" 
          ng-class="{gray:$index==$currentIndex}" 
          style="cursor:pointer;" 
          ng-click="push(data.name,data.id)" 
          ng-mouseover="onMouseoverOver($index)" >
          <div>{{data.name}}</div> 
       </li>
   </ul>
</div>

JS

(function() {
    'use strict';
    app.directive('ajaxuserSelect', ['$window', '$timeout', function($window, $timeout) {

        return {
            restrict: 'AE',
            scope: {
                myId: '@',
                myUrl: '=',
                myDatas: '=',
                value: '='
            },
            controller : ['$scope','$timeout','httpJesen',function($scope,$timeout,httpJesen){
                $scope.selectFlag = false;// 下拉框是否显示
                var clickFlag = false;// 监听是否有选取状态
                // 对json数据中map对象添加属性
                var addAttr = function(json){
                    json.forEach(function(item){
                        for(var i in item){
                            if(i == 'userId'){
                                item['id'] = item[i];
                            }else if(i == 'userName'){
                                item['name'] = item[i];
                            }
                        }
                    });
                    return json;
                };

                console.log($scope.myUrl);
                var inputId = $scope.myId+'';

                // 监控timeoutName变化 延迟查询
                $scope.getSearch = function(name){
                    clickFlag = false;
                    if(name == undefined){
                        $scope.selectFlag = false;
                        $scope.value = '';
                    };
                    var timeout;
                    if(name){
                        if(timeout){
                            $timeout.cancel(timeout);
                        };
                        timeout = $timeout(function(){
                            var params = angular.toJson({"userName":name});
                            httpJesen.formPost('user/queryList',params,function(data){
                                var message = data.responseMsg;
                                if (data.responseCode == 1) {
                                    console.log(data);
                                    $scope.myDatas = addAttr(data.responseData.list);
                                    if($scope.myDatas.length){
                                        $scope.selectFlag = true;
                                    }else{
                                        $scope.selectFlag = false;
                                        document.getElementById(inputId).value='';
                                        $scope.value = '';
                                    }
                                } else {
                                    msgInfo = {title: "提示", msg: message, pbtn: "确认", pshow: true, nbtn: "取消", nshow: true};
                                    $scope.open();
                                }
                            });
                        
                        },350);
                    }
                };
                // 鼠标悬停下拉元素事件
                $scope.onMouseoverOver = function($index){
                    $scope.$currentIndex = $index;
                };
                // 选取下拉指定元素事件
                $scope.push = function(name,id){
                    console.log(name+id);
                    $scope.selectFlag = false;
                    document.getElementById(inputId).value=name;
                    $scope.value = id;
                    clickFlag = true;
                };
                $scope.onBlur = function(){
                    if(!clickFlag){
                        document.getElementById(inputId).value='';
                    }
                };
                // 实现点击页面的任意地方隐藏指定元素？
                var area = document.getElementById(inputId);
                $(document).click(function(e){
                    var target=e.target;
                    if(target!=area ){
                        $scope.$apply(function(){
                            $scope.selectFlag = false;
                        })
                    }
                });
            }],
            templateUrl: '../tpl/ajaxSelect.html',
            replace: true,
            link: function(scope, element, attrs, controller) {
                
                element.on('$destroy', function() {
                    scope.$destroy();
                });
            }

        };
    }]);
})();

应用案例

<ajaxuser-select my-id="inputSearch1" my-datas="myDatas" value="item.username"></ajaxuser-select>