为 <datalist> 调用事件函数并扩展 <input> 标签 - HTML 5

Question

我正在尝试使用 CSS 来扩展 CSS 搜索图标的悬停/焦点上的输入框

现在，我正在尝试将 html 中的函数调用为角度组件（似乎我不能将 CSS 与 datalist 元素一起使用），这样当我转移焦点或从 datalist 中选择一个项目时，输入标签会保持展开状态

这是我的示例 HTML

  <div class="searchDiv">

      <span class="glyphicon glyphicon-search" id="searchSpan"  (click)="searchEvent($event)"></span>
      <form [formGroup]="searchGroup" (ngSubmit)="searchEvent($event)">
       <input type="text" placeholder="search" id="searchInput"  formControlName="localInput" class="" list="promotionsSearchList"
       (keyup)="searchEvent($event)" />
       </form>
       <datalist id="promotionsSearchList" class="test" 
        onfocus="focusEvent()" onmousemove="focusEvent()">

       </datalist>

 </div>

这是我的 CSS

.customClass {
  float: center;

 }

.grid {
  display: inline-grid;
   grid-template-columns: 150px 150px 150px 150px auto;
   grid-template-rows: repeat(3,25px);
   width: 100%;

  }

   #headerDiv {
     grid-row : 1;
      grid-column : 1/6;
     padding-top: 14px;

     }

     #firstElementSpan {
       grid-row:1;
       grid-column:2/6;

      }

     #secondElementSpan {
        grid-row:1;
        grid-column:3/6;
      }

      #thirdElementSpan {
        grid-row:1;
        grid-column:4/6;
      }

      #fourthElementSpan {
        grid-row:1;
        grid-column:5/6;
       }

       .rounded-text-box{
         border-radius: 2px;
        border: 2px solid #555;
        padding: 20px;
         width: 200px;
         height: 15px;
       }


   .searchDiv{
      width: 500px;
      vertical-align: middle;
      white-space: nowrap;
      position: relative;
    }

   .searchDiv input#searchInput{

     width: 45px;
      height: 30px;
      background: white;
     border: none;
     font-size: 10pt;
     float: left;
     color: black;

     /*this is to accomadate the search icon  */
      padding-left: 45px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
      border-radius: 5px;
    }

     .searchDiv #searchSpan{

      /*the position needs to be mentioned as absolute for the icon to 
      appear on top of the input  */
       position: absolute;
       top: 5%;
        margin-left: 17px;
       margin-top: 7px;
        /*for now z index is mentioned as to make the icon on top   */
       /* z-index: 5; */
        z-index : 1;
       color: #4f5b66;
       background-color: inherit;
      }


      .searchDiv input#searchInput:hover, .searchDiv 
      input#searchInput:focus, .searchDiv input#searchInput:active{
        outline:none;
        width:300px;
      } 

      .searchDiv:hover input#searchInput{
        width:300px;
      }

      .searchDiv:hover #searchSpan{
       color: #93a2ad;
      }

      /* this is not working , hence tried to use get the element in 
        angular and change its DOM prop*/
     datalist:active, datalist:focus input#searchInput{
      width:300px;
     }

这是我的示例角度组件调用。此时我已经简化到 func 调用的地步了

  focusEvent(){
    console.log('onfocusEvent');
    const inputElement = document.getElementById('searchInput');



     inputElement.style.width = '300px';

   }

我没有看到函数被调用。我也尝试使用 angular 的属性绑定，但没有运气。基本上，当我将焦点转移到 datalist 元素并浏览列表时，我希望输入元素保持扩展。你们能帮忙吗？

Answer 1

感谢@CBroe 通知这一点。我们不能监听任何事件，也不能使用 datalist 进行任何修改。因此我开始使用 ul

这是一个修改后的示例html代码：

<div class="searchDiv">

      <span class="glyphicon glyphicon-search" id="searchSpan"  (click)="searchEvent($event)"></span>

       <input type="text" placeholder="search" id="searchInput"   class="" list="promotionsSearchList"
       (keyup)="searchEvent($event)" [(ngModel)]="searchModel"/>

       <ul  *ngIf="loadDropDown">
         <li  *ngFor="let pp of promoList" (click)="selectAnyItem($event)" value="pp.id"><span>{{pp.name}}</span>
         </li>
       </ul>

</div>

这是我实现的 CSS。

 ul {
    padding: 2px;
    list-style-type: none;
     z-index:2;
    background-color:black;
    /*below css makes the element clear the float and move to the next 
    line if placed in the same block  */
    clear:both;

   }

 li:hover{
       background-color: dodgerblue;
 }

 .rounded-text-box{
      border-radius: 2px;
      border: 2px solid #555;
      padding: 20px;
      width: 200px;
      height: 15px;
  }


  .searchDiv{
       width: 500px;
       vertical-align: middle;
        white-space: nowrap;
       position: relative;
    }

    .searchDiv input#searchInput{

           width: 45px;
           height: 30px;
           background: white;
           border: none;
           font-size: 10pt;
           float: left;
           color: black;
           /*this is to accomadate the search icon  */
           padding-left: 45px;
           -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
           border-radius: 5px;

           }

         .searchDiv #searchSpan{
             position: absolute;
             top: 5%;
              margin-left: 17px;
             margin-top: 7px;

             z-index : 1;
             color: #4f5b66;
             background-color: inherit;
           }


          .searchDiv input#searchInput:hover, .searchDiv 
         input#searchInput:focus, .searchDiv input#searchInput:active{
          outline:none;
           width:300px;
          } 

          .searchDiv:hover input#searchInput {
              width:300px;

              box-sizing:border-box;
            }

           .searchDiv:hover ul{
               width:300px;
               box-sizing: border-box;
            }

            .searchDiv:hover #searchSpan{
               color: #93a2ad;
            }

希望这对尝试实施的用户有所帮助