Question

我的目的是建立具有搜索功能的输入。如果没有匹配结果，则用户可以直接选择add new。

所以我已经尝试使用angularJS来处理焦点，模糊，文本过滤器，重复选项事件。

但是因为我选择使用选项控件退出HTML select并构建一个包含所有选项的绝对div，所以我需要连接鼠标事件和键盘上/下事件以使其起作用。

但是我遇到了一个问题，当鼠标悬停在自定义选项上时，我的jquery事件不是tigger。

此代码有任何错误吗？

代码段

var app = angular.module("app", []);
var appController = ["$scope", "$timeout", function($scope, $timeout){
 $scope.isShow = false;
 $scope.selectedObj = {
   name: '',
   email: '',
 };
 $scope.tests = [
   {"name": "test 1", "email": "test1@123.com"},
   {"name": "test 2", "email": "test2@abc.com"},
   {"name": "test 3", "email": "test3@def.com"},
   {"name": "test 2", "email": "test2@abc.com"},
   {"name": "test 3", "email": "test3@def.com"},
    {"name": "test 1", "email": "test1@123.com"},
   {"name": "test 2", "email": "test2@abc.com"},
   {"name": "test 3", "email": "test3@def.com"},
   {"name": "test 2", "email": "test2@abc.com"},
   {"name": "test 3", "email": "test3@def.com"},
 ];
  $scope.onFocus = function(){
    //console.log("focus");
    $scope.isShow = true;
  }
  $scope.onBlur = function(){
    //console.log("blur");
    $timeout(function(){$scope.isShow = false}, 200)
  }
  $scope.onOptionSelect2 = function(obj){
    console.log(obj);
    angular.copy(obj, $scope.selectedObj);
  }
  $scope.filterFunction = function(item){
    if($scope.selectedObj == undefined || $scope.selectedObj.name == '') return true;
    
    if(item.name.includes($scope.selectedObj.name) || item.email.includes($scope.selectedObj.name) ){
      return true;
    }
    return false;
  }
}]

var inputSearch = function(){
  return {
     restrict: 'E',
        scope: { model: '=' },
        template: '<div style="display:relative"></div>',
  }
}

var controllers = [];
var directives = [];
controllers.appController = appController;
app.controller(controllers);
directives.inputSearch = inputSearch;
app.directive(directives);

  console.log("ready");
  $('.drop-down-option')
   .mouseenter(function(){console.log('enter')})
   .mouseover(function(){console.log('over')})
   .mouseout(function(){console.log('out')})
   .mouseleave(function(){console.log('leave')});

.drop-down-container{
  position:relative;
}
.drop-down{
  height: 200px;
}
.drop-down-list{
 position: absolute;
  background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 15px 0 rgba(0,0,0,0.06);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #d5dce0;
  height:auto;
  max-height:200px;
  width: 517px;
  overflow-y:auto;
  z-index: 2000;
}
.drop-down-option{
    align-items:center;
    justify-content: space-between;
    display:flex;
    height: 40px;
    width: 500px;
    padding: 0 15px;
    background: #fff;
    cursor: pointer;
    border-bottom: 1px solid #fff;
}
.drop-down-option-hightlight{
    background: #14aaf5;
    color: #fff;
    fill: #fff;
}
.drop-down-option:hover{
    background: #14aaf5;
    color: #fff;
    fill: #fff;
}
.name-field{
  /*align-self:flex-start;*/
}

.email-field{
   /*align-self:flex-end;*/
}

.add-field{
  border-top:1px solid #ddd;
  /*justify-content: flex-start;*/
  display: block;
  font-size: 12px;
}

.add-field .subtitle{
  font-size:10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row" ng-app="app" ng-controller="appController">
  <form name="testForm">
  <label class="col-sm-3 control-label">select or type</label>
  <div class="col-sm-4">
  <div class="drop-down-container"> 
  <input type="text" name="customtype" ng-focus="onFocus()" ng-blur="onBlur()" ng-model="selectedObj.name" class="form-control" autocomplete="off"/>
  <div class="drop-down" style="position:absolute" ng-if="isShow">
    <div class="drop-down-list">
      <div role="option" 
           class="drop-down-option" 
           aria-selected="false" 
           ng-repeat="obj in tests | filter: filterFunction"
           ng-click="onOptionSelect2(obj)">
        <div class="name-field">{{obj.name}}</div><div class="email-field">{{obj.email}}</div>
      </div>
      <div class="drop-down-option add-field">
        <div><span class="subtitle">New</span></div>
        <span ng-show="selectedObj != undefined && selectedObj.name.length > 0">{{selectedObj.name}}</span>
        
      </div>
    </div>
  </div>
  </div>
  </div>
    </form>
  <div class="row">
    <div class="col-sm-12">
      Your data: {{selectedObj.name}}
    </div>
  </div>
</div>
</div>

Answer 1

由于我要遍历angularJs生成的ui，所以错过了鼠标事件的角度处理方式。

通过将std::allocator<int * const>更改为.mouseleave，它现在可以使用。

jQuery鼠标事件位置绝对内容中无触发器

代码段

1 个答案: