Question

我正致力于搜索功能。建议列表的div在搜索服务器中的名称时显示，并在没有结果时消失，

但是当有结果并且我在搜索字段外单击时，它就不会消失

＆＃13;

getSuggestion(name) {
    this.search
    .getSuggestion(name)
    .subscribe(
        name => this.results = name,
        error => alert(error),
        );
  }
  onChange(name) {
  }
  function(e){
    $('suggestion').hide();
  }
  showEmployee(id: string) {
    this.route.navigate(['/information/employees', id]);
    this.results = [];
  }

＆＃13;

.suggestion {
    cursor: pointer;
    overflow: visible;
    position: absolute;
    background: #FFF;
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
    margin: 3rem 0;
    padding: 6em;
    width: inherit;
    padding: 5px 0px 5px 20px;
    border-radius: .28571429rem;
    border: 0px solid rgba(34,36,38,.15);
    z-index: 1;
}
.search-res{
    margin-bottom: 5px;
}
.search-res:hover{
    margin-bottom: 5px;
    color: #2196f3;
}

＆＃13;

<input class="s" type="text" placeholder="Search" (keyup)="getSuggestion($event.target.value)" (change)="onChange($event.target.value)">
<div class="suggestion" *ngIf="results.length > 0">
     <div *ngFor="let result of results">
          <div class="search-res" (click)="showEmployee(result._id)">
               {{ result.name }}
          </div>
     </div>
</div>

＆＃13;

Answer 1

您可以添加要隐藏的div的(focusout)事件

如何在外部点击时隐藏div

1 个答案: