JSON-фильтрация с живым поиском

Question

Я хочу отобразить карты данных на веб-сайте. Данные извлекаются из URL-адреса JSON. Это тоже работает. Но теперь я хочу отфильтровать карточки так, чтобы я видел только те, которые соответствуют поисковому вводу. Кто-нибудь может мне помочь? Я попробовал несколько подходов, но не могу дальше, потому что я также новичок в Javascript.

У меня есть следующий код:

var yourUrl = "myURL";
function Get(yourUrl) {
    // get JSON data via Ajax...
    return `[
    {"link": "alice", "profile": "profile1", "profilename": "Alice", "str": "Allen Street", "location": "New York"},
    {"link": "bob", "profile": "profile2", "profilename": "Bob", "str": "Market St.", "location": "San Francisco"}
    ]`;
}        
var postData = JSON.parse(Get(yourUrl));

function append_json(data) {
  //Set Up the template
  var s = $("#postTemplate")[0].innerHTML.trim();
  var holder = document.createElement('div');
  holder.innerHTML = s;
  var template = holder.childNodes;

  var member = document.getElementById('newprofile');
  data.forEach(function(object) {

    //Clone Template
    var newItem = $(template).clone();

    //Populate it
    $(newItem).find(".memurl").attr("href", object.link);
    var img = $(newItem).find(".thumb")
    $(img).attr("src", object.image).attr("alt", $(img).attr("alt") + object.profile + " " + "etc")
      .attr("title", $(img).attr("title") + object.profilename + " finish this off");
    $(newItem).find(".profile").html(object.profile);
    $(newItem).find(".street").html(object.str);
    $(newItem).find(".location").html(object.location);
    //Append it

    $(".newprofile").append(newItem);

  });
}

$("document").ready(function() {
  append_json(postData);
});

.member {
  border: 1px solid silver;
  margin: 5px;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="profilesearch">
    <input type="text" placeholder="search">
</div>

<div class="newprofile">
  <!-- Template for our posts -->
  <script type="text/template" id="postTemplate">
    <div class="member">
      <a class="memurl" href="">
        <img class="thumb" alt="Profil" title="Profil" src="">
       </a>
      <!-- Replaced p  with div, can't nest p tags -->
      <div class="info">
        <p class="profile"></p>
        <p class="street"></p>
        <p class="location"></p>
        </div>
        <div class="card-outmore">
      <a class="memurl" href="" target="_blank">Zum Profil</a>
      </div>

    </div>
  </script>
</div>