Wie kann ich mein Sucheingabefeld wie Pitchforks einzigartige Suche funktionieren lassen?

Question

Auf https://pitchfork.com und https://pitchfork.com/artists/ haben sie eine wirklich interessante Sucheingabe. Während Sie tippen, folgt eine rote Umrandung Ihrer Eingabe. Ich möchte das neu erstellen. Irgendwelche Ideen, wie das gemacht wird?

Answer 1

Dies könnten Sie den Einstieg helfen ...

$("#input").keyup(function(event) { 
 
    var input = $(this).val(); 
 
    $("#border").text(input); 
 
});

div { 
 
    position: relative; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    padding-bottom: 2px; 
 
} 
 

 
input, 
 
span { 
 
    font-size: 16px; 
 
    font-family: arial; 
 
} 
 

 
input { 
 
    border: none; 
 
    border-bottom: 1px solid #F4F4F4; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    top: 2px; 
 
    left: 2px; 
 
    color: transparent; 
 
    border-bottom: 2px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <input id="input" type="text"> 
 
    <span id="border"></span> 
 
</div>