模糊查询封装

来源：互联网发布：女生喜欢什么礼物知乎编辑：程序博客网时间：2024/05/16 15:14

需要引入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>

(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>

阅读全文

0 0