0

I'm working on Search functionality. The div of suggestion list shows upon searching a name in the server and disappears when there are no results,

But when there are results and I click outside the search field, it won't disappear

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 = [];
  }
.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;
}
<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>
Char
  • 2,073
  • 8
  • 28
  • 45
  • put an eventHandler on the document and evaluate the eventTarget. If it's not a childNode of your div (or the div itself), close it – Psi Jun 23 '17 at 01:51
  • 1
    https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it – Michael Coker Jun 23 '17 at 01:55

1 Answers1

0

You can add (focusout) event of that div that you want to hide