无法为搜索栏添加找到的项目

Question

其实我有这个：

我想做一个这样的搜索栏：

特地在搜索栏下方添加所有成立的东西

我正在使用 angular material 和颜色主题，如解释的那样。

编译后，再编辑，这是第二张图的代码（带绿色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>

编译的HTML部分是这样的：

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

我不知道如何用我的实际 HTML 代码添加“测试”div。我尝试在表单域下方或表单域中添加一个 div，像这样：

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

然后，在打字稿中使用：

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

但是 div 添加在搜索栏的右侧（而不是下方）:

此外，与 display: contents 不同的值，我得到这样的结果：

如何制作一个好的搜索栏？

Here 是stackblitz 不是很好...

Answer 1

在 angular material 组件中添加 div 无法正常工作。我就是这样解决的：

为结果创建自己的组件。对于这个答案，它将被命名为 <app-search-result>.
在头部栏下方，添加一个新的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>

position: fixed 允许它到处移动而不移动其他 div。 x-index 只是让它显示 hover other divs.

移动搜索结果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";
}

search-field是mat-form-field的id。

将内容添加到 allSearchedItem 数组（将包含所有结果）后，调用 moveSearchResult() 方法。

现在，这就是我所拥有的：

Bonus：我个人添加了与输入相同的 width/max-width 以使其大小相同。另外，请注意在特定组件中声明的 class。

无法为搜索栏添加找到的项目

Can't add found item for search bar

html

searchbar

angular