'Having trouble using List.js to filter student profiles in JavaScript?

I am trying to filter student profiles via an input field.

JavaScript grabs the data via an API and then using a return function I display the data on an HTML page.

I have been using list.js to attempt to create a filter that will filter the data by name. Unfortunately, my methods are not working.

I am just asking what I am doing wrong here and how is it best done?

My Code via Codepen

HTML portion

<div id="studentList">
    <input class="search" placeholder="Search" />
    <button class="sort" data-sort="name">Sort</button>
        <div class="list">
            <p>Placeholder for search functions</p>
            <span class="sort" data-sort="name"></span>
        </div>
</div>

JavaScript portion

    var options = {
  valueNames: [ 'name']
};

var studentList = new List('studentList');

  function returnList () {
  results = document.getElementsById('studentList');
    return `
      <div id='studentList'>
        <h2 class='name'>${student.firstName} ${student.lastName}</h2>
      </div>
      `
  };


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source