angular的directive简易模糊搜索指令

简易例子，可仿写使用
//html

<div class="wth100 qb-wrap" ng-controller="cqTestCtr">
	<!--引用1-->
    <div class="wd240 ht-t40">
        <search-select class="wth100" search="searchObj4"></search-select>
    </div>
    <p>{{searchObj4.setValueObj.person.email}}</p>
    <p>{{searchObj4.setValueObj.org.name}}</p>

	<!--引用2-->
    <div class="wd240 ht-t40">
        <search-select class="wth100" search="searchObj5" ></search-select>
    </div>
    <p>{{searchObj5.setValueObj.person.email}}</p>
    <p>{{searchObj5.setValueObj.org.name}}</p>
 <div>

//cqTestCtr.js

	//定义第一个组件需要的
    $scope.searchObj4 = {
        data:' ', //数据list
        showName:'personName', //要搜索的数据的字段名称
        setValueObj:{//选中数据以后，可能要赋值的其它数据的字段，只一级
            person:‘’,
            org:‘’
        },
        selectFun:function (res) {//选中数据以后 选中的res 返回来 ，可执行操作（上面的参数不满足，可以写这）
            console.log(res);
        }
    }
    //定义第二个组件需要的
    $scope.searchObj5 = {
        data:'',
        showName:'personName',
        setValueObj:{
            person:{email:''},
            org:{name:''}
        },
        selectFun:function (res) {
            console.log(res);
        }
    }
$scope.getData = function(){
	//查数据  赋值
	//..............................查数据省略
	$scope.searchObj4.data = result.data.list;
    $scope.searchObj5.data = result.data.list;        
}

//directive.js

'use strict';

app.directive('searchSelect',function() {
    return {
        restrict: 'EA',
        scope: {
            search:'=',
        },
        template:function (tElement,tAttrs) {
            var html =
                "        <div class=\"downsearhlist-wrap wth100\">\n" +
                "            <input class=\"wth100\" type=\"text\" name=\"projectCode\" required placeholder=\"请选择\"\n" +
                "                   autocomplete=\"off\" readonly ng-click=\"showTempDownList($event)\" ng-model=\"tempName\">\n" +
                '            <div class="mohu-wrap moHuWrap" style="display: block;" ng-show="initShowDownList">' +
                "                <div class=\"wt-posrel\">\n" +
                "                    <input type=\"text\" class=\"wt100\" ng-model=\"mohuTempName\" placeholder=\"请输入关键词查找\" ng-click=\"showTempList($event)\" ng-change=\"changeTempSearch(mohuTempName)\">\n" +
                "                    <i class=\"m-fdg-ico\" ng-show=\"mohuTempName ==''\"></i>\n" +
                "                    <i class=\"m-clear-ico\" ng-click=\"clearMohuProjectName($event)\" ng-show=\"mohuTempName !=''\"></i>\n" +
                "                </div>\n" +
                "                <ul class=\"mohu-list\">\n" +
                "                    <li ng-repeat=\"p in tempResList\" ng-click=\"selectTempList(p,$event)\" title=\"{{p[showName]}}\">{{p[showName]}}</li>\n" +
                "                </ul>\n" +
                "            </div>\n" +
                "        </div>";
            return html;
        },
        link: function ($scope, iElement, iAttrs, controller) {
            $scope.showName=$scope.search.showName;//展示的字段属性
            $scope.resObj = $scope.search.setValueObj;//需要设置的字段属性对象
            $(iElement).find('.moHuWrap').css('top',$(iElement).parent().height()-2);
            $scope.initShowDownList = false;//下拉默认隐藏
            //展示下拉
            $scope.showTempDownList = function($event){
                $scope.tempResList = $scope.search.data;
                $scope.initShowDownList = true;
                $event.stopPropagation();
            }

            //阻止冒泡
            $scope.showTempList = function($event){
                $event.stopPropagation();
            }

            //change 事件
            $scope.changeTempSearch = function(searchMsg){
                $scope.tempResList = [];
                angular.forEach($scope.search.data, function(value,index) {
                    if(value[$scope.showName].indexOf(searchMsg) != -1){
                        $scope.tempResList.push(value);
                    }
                });
                if(searchMsg == "" || searchMsg == undefined || searchMsg == null){
                    $scope.tempResList = $scope.search.data;
                }
            }

            //clear 事件
            $scope.clearMohuProjectName = function($event){
                $scope.mohuTempName = "";
                $scope.tempResList = $scope.search.data;
                $event.stopPropagation();
            }
            //拿到所有key
            $scope.initKeyArr = [];
            $scope.initObjKey = function(){
                if(typeof $scope.resObj == 'object'){
                    angular.forEach($scope.resObj, function(value, key) {
                        $scope.initKeyArr.push(key);
                    });
                }
            }
            $scope.initObjKey();
            //选择
            $scope.selectTempList = function (p,$event) {
                console.log($event);
                angular.forEach($scope.initKeyArr, function(value) {
                    $scope.tempName=p[$scope.showName];
                    $scope.resObj[value] = p[value]
                });
                $scope.initShowDownList = false;
                $scope.mohuTempName = "";
                if($scope.search.selectFun){
                    $scope.search.selectFun(p);
                }
            }
            //其它空白点击
            $(document).on("click", function(){
                $scope.initShowDownList = false;
                $scope.mohuTempName = "";
                $scope.$applyAsync();
            });
        }
    }
});

//简易css，template里面html可按自己的风格写

.downsearhlist-wrap{
	width: 100%;
	height: 100%;
	position: relative;
}
.wt-tenListAdd-list .downsearhlist-wrap input{
	margin: 0;
	padding: 0 10px;
}
.downsearhlist-wrap .res-list{
	position: absolute;
	z-index: 2;
	top: 27px;
	left: 0;
	border: 1px solid #e01116;
	background-color: #fff;
	width: 100%;
	display: none;
	max-height: 360px;
	overflow-y: auto;
}
.downsearhlist-wrap .mohu-wrap{
	height: 240px;
	width: 100%;
	top: 28px;
	left: 0;
	position: absolute;
	display: none;
	border: 1px solid #e0e0e0;
	background-color: #fff;
	z-index: 2;
	box-shadow: 1px 1px 5px #ffe7e8;
}
.downsearhlist-wrap .mohu-wrap input{
	width: 100%;
	height: 30px;
	border: none;
	line-height: 28px;
	padding:0 24px 0 10px;
	background-color:#fff5f5;
	border-bottom: 1px solid #e0e0e0;
}
.downsearhlist-wrap .mohu-wrap .m-fdg-ico,.downsearhlist-wrap .mohu-wrap .m-clear-ico{
	position: absolute;
	right: 10px;
	height: 100%;
	width: 14px;
	top: 0;
}
.downsearhlist-wrap .mohu-wrap .m-fdg-ico{
	background: url(../images/tit-icon/mohu_ico_07.png) center center no-repeat;
}
.downsearhlist-wrap .mohu-wrap .m-clear-ico{
	background: url(../images/tit-icon/mohu_ico_03.png) center center no-repeat;
	cursor: pointer;
}
.downsearhlist-wrap .mohu-wrap input::-webkit-input-placeholder { /* WebKit browsers */
	color: #e01116;
	font-size: 14px;
}
.downsearhlist-wrap .mohu-wrap input::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #e01116;
	font-size: 14px;
}
.downsearhlist-wrap .mohu-wrap input:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: #e01116;
	font-size: 14px;
}
.downsearhlist-wrap .mohu-list{
	height: 210px;
	width: 100%;
	overflow-y: auto;
}
.downsearhlist-wrap .mohu-list li{
	border-bottom: 1px solid #e0e0e0;
	height: 30px;
	line-height: 30px!important;
	padding: 0 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-height: 30px!important;
}
.downsearhlist-wrap .mohu-list li:last-child{
	border-bottom: none;
}
.downsearhlist-wrap .mohu-list li:hover{
	background-color: #f1f1f1;
	/*color: #fff;*/
}
.downsearhlist-wrap .res-list li{
	border-bottom: 1px solid #e0e0e0;
	cursor: pointer;
	height: 28px;
	line-height: 28px;
	cursor: pointer;
	padding: 0 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.downsearhlist-wrap .res-list li:hover{
	background-color: #e01116;
	color: #fff;
}

.downsearhlist-wrap .res-list li:last-child{
	border-bottom: none;
}