Can't add found item for search bar

Question

Actually, I have this:

I want to make a search bar like that:

Specially add all founded things below the search bar.

I'm using angular material and color theme such as explained in this question.

After compiling, then edit, this is the code of the second picture (with green div) :

<div style="display: contents;">
   <div style="display: contents;">
      <mat-form-field appearance="fill" class="mat-form-field ng-tns-c111-0 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-fill mat-form-field-can-float ng-star-inserted" style="width: 33%; min-width: 50px; padding: 0;max-width: 500px;bottom: 0;" ng-reflect-appearance="fill">
         <div class="mat-form-field-wrapper ng-tns-c111-0" style="bottom: 0;">
            <div class="mat-form-field-flex ng-tns-c111-0">
               <div class="mat-form-field-infix ng-tns-c111-0">
                  <input matinput="" type="text" class="mat-input-element mat-form-field-autofill-control ng-tns-c111-0 cdk-text-field-autofill-monitored" style="width: 33%; min-width: 50px; max-width: 500px;" ng-reflect-type="text" ng-reflect-placeholder="Search" placeholder="Search" id="mat-input-0" data-placeholder="Search" aria-invalid="false" aria-required="false">
                  <span class="mat-form-field-label-wrapper ng-tns-c111-0">
                  </span>
               </div>
            </div>
            <div class="mat-form-field-underline ng-tns-c111-0 ng-star-inserted" style="padding: 0;margin: 0;visibility: hidden;"><span class="mat-form-field-ripple ng-tns-c111-0"></span></div>
            <div class="mat-form-field-subscript-wrapper ng-tns-c111-0" ng-reflect-ng-switch="hint">
               <div class="mat-form-field-hint-wrapper ng-tns-c111-0 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);">
                  <div class="mat-form-field-hint-spacer ng-tns-c111-0"></div>
               </div>
            </div>
         </div>
         <div style="background-color: green;">text</div>
      </mat-form-field>
   </div>
</div>

The HTML part that is compiled is this:

<div style="display: contents;">
  <div style="display: contents;">
    <mat-form-field appearance="fill" style="width: 33%; min-width: 50px; max-width: 500px;">
      <input matInput type="text" placeholder="Search" style="width: 33%; min-width: 50px; max-width: 500px;">
    </mat-form-field>
  </div>
</div>

I don't know how to add the "test" div with my actual HTML code. I tried to add a div below the form field, or in the form field, like that:

<div style="display: contents;">
  <div style="display: contents;">
    <mat-form-field appearance="fill" style="width: 33%; min-width: 50px; max-width: 500px;">
      <input matInput type="text" placeholder="Search" style="width: 33%; min-width: 50px; max-width: 500px;">
    </mat-form-field>
  </div>
  <div id="search-field"></div>
</div>

Then, in typescript use:

let div = document.getElementById("search-field");
let next = document.createElement("div");
next.innerHTML = "text";
next.classList.add("search-result");
div.appendChild(next);

But the div is added on the right of search bar (instead of below) :

Also, with different value than display: contents, I get things like that:

How can I make a good search bar?

Here is a stackblitz that is not very well ...

Answer 1

It could not work by adding div into the angular material components. This is how I fix it :

1. Create own component for the result. For this answer, it will be named <app-search-result>.

2. Below the head bar, add a new div:

<div style="position: fixed; z-index: 100;" id="search-result">
  <app-search-result *ngFor="let searchedItem of allSearchedItem" [item]="searchedItem"> </app-search-result>
</div>

The position: fixed allow it to move everywhere without moving other div. The x-index is only to make it showed hover other divs.

3. Move the search result div :

@HostListener('window:resize')
onResize() {
  this.moveSearchResult();
}

moveSearchResult() {
  let searchResult = document.getElementById("search-result");
  if(searchResult == null)
    return;
  let fieldBox = document.getElementById("search-field").getBoundingClientRect();
  searchResult.style.marginLeft = fieldBox.x + "px";
}

The search-field is the id of the mat-form-field.

4. Just after adding content to the allSearchedItem array (that will contains all result), call moveSearchResult() method.

Now, this is what I have :

Bonus: I personnally add the same width/max-width as the input to make it as same size. Also, be careful with class that are declared into a specific component.