Wie man das Suchfeld reagiert

Question

Vielen Dank für die schnelle Antwort auf meine früheren Post. Ich habe bootstrap navbar für den Start verwendet, wie mache ich das Suchfeld dynamisch wie das von Stackoverflow? Für jetzt, anstatt es zu erweitern, Verträge.

<template name="DashboardLayout"> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left"> 
     <div class="form-group"> 
      <div class="col-md-8" style="align-content: right;"><input type="text" name="search" placeholder="Search.."> </div> 
     </div> 

     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
</template> 

Answer 1

Ich hoffe, das kann Ihnen helfen.

https://jsfiddle.net/pablodarde/6r842g4r/

Fügen Sie einen Klassennamen auf Ihre Eingabe Suchfeld ...

HTML

<div class="col-md-8" style="align-content: right;"><input type="text" name="search" placeholder="Search.." class="alive"> </div> 
</div> 

CSS

.alive { 
    width: 200px; 
    transition: all 0.5s; 
} 

.expand { 
    width: 350px; 
} 

JavaScript

const input = document.querySelector('.alive'); 

input.addEventListener('click',() => { 
    input.className += ' expand'; 
}); 

input.addEventListener('blur',() => { 
    input.className = 'alive'; 
});