What is the best way to initialize listjs with divs

262 Views Asked by At

I am attempting to make a searchable database with list.js but the search function is not working. I am not sure if I initialized it correctly or what I am doing wrong. I am sure it is something obvious but I would love another set of eyes.

Here is my HTML

<body>  

<div class="hof-list">

<input class="search" placeholder="Search for a member..."/><br>

    <div class="list">

        <div class="objects">
            <div class="name">Lucille Ball</div>
            <div class="year">2018</div>
        </div>

        <div class="objects">
            <div class="name">Jeremy Jacobs</div>
            <div class="year">2018</div>
        </div>

        <div class="objects">
            <div class="name">Russell Salvatore</div>
            <div class="year">2018</div>
        </div>

        <div class="objects">
            <div class="name">John Albright</div>
            <div class="year">2017</div>
        </div>

        <div class="objects">
            <div class="name">Lousie Bethune</div>
            <div class="year">2017</div>
        </div>

        <div class="objects">
            <div class="name">Glenn Curtis</div>
            <div class="year">2017</div>
        </div>

        <div class="objects">
            <div class="name">John Oishei</div>
            <div class="year">2018</div>
        </div>          

        <div class="objects">
            <div class="name">Mary Burnett Talbert</div>
            <div class="year">2017</div>            
      </div>
    </div>
    </div>

</body>

Here is my script

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

var hoflist = new List('hof-list', options);
1

There are 1 best solutions below

0
extempl On

According to docs it expects the following parameters: new List(id/element, options, values); where id/element is

id or element *required Id the element in which the list area should be initialized. OR the actual element itself.

So you should pass there an actual id (so you need to change it in your html), or, you can pass there an element with

new List(document.querySelector('.hof-list'), options)