angular的directive简易模糊搜索指令

ゝ一纸荒年。 2021-11-13 20:32 340阅读 0赞

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

<div class="wth100 qb-wrap" ng-controller="cqTestCtr">
    	
        <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>
    
    	
        <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;
    }