Pitchforkのユニーク検索のような検索入力フィールド機能を使用するにはどうすればよいですか？

Question

https://pitchfork.comとhttps://pitchfork.com/artists/には、本当に興味深い検索入力があります。入力すると、入力する内容に赤い枠が続きます。私はこれを再現したいと思います。これがどのように行われるかについてのアイデアはありますか？

Answer 1

これは、あなたが始めるのに役立つかもしれない...

$("#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>