如何使我的搜索输入字段功能像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>