How do you use search to create a table with list.js?

Question

I am trying to create a form that, when submitted, lists all available flights within the users' specifications by using Listjs. I don't know what is going wrong, but when I try to manually add something to the list, nothing happens. HTML:

<div class="box-body table-responsive no-padding" id="search-list">
    <table class="table table-hover">
        <tr>
            <th class="sort" data-sort="flight">Flight</th>
            <th class="sort" data-sort="departure">Departing</th>
            <th class="sort" data-sort="arrival">Arriving</th>
            <th class="sort" data-sort="duration">Dur.</th>
            <th class="sort" data-sort="aircraft">Aircraft</th>
            <th class="sort" data-sort="cat">CAT</th>
            <th class="sort" data-sort="operation">Operating</th>
            <th class="sort" data-sort="carrier">Carrier</th>
        </tr>
        <tbody class="list">
        </tbody>
    </table>
</div>
<div style="display:none;">
    <!-- A template element is needed when list is empty, TODO: needs a better solution -->
    <tr id="search-item">
        <td class="flight"></td>
        <td class="departure"></td>
        <td class="arrival"></td>
        <td class="duration"></td>
        <td class="aircraft"></td>
        <td class="cat"></td>
        <td class="operation"></td>
        <td class="carrier"></td>
    </tr>
</div>

I'm not 100% sure if it is relevant, but I also get this script error from the list.min.js file Uncaught TypeError: Cannot read property 'cloneNode' of null .

Javascript:

<script src="../js/list.min.js" type="text/javascript"></script><!-- List.js -->

<script type="text/javascript">
var options = {
     valueNames: [ 'flight', 'departure', 'arrival', 'duration', 'aircraft', 'cat', 'operation', 'carrier' ],
    item: 'search-item'
};

var searchlist = new List('search-list', options);

searchlist.add({ flight: 'mdkwoan', departure: 'afds2f', arrival:'adsfwef', duration:'Fjwefjhidni', aircraft:'ksoksj', cat:'kaojajs', operation:'joskemeks', carrier:'fasfbijbfiukfd' });
</script>

Answer 1

You cannot use a "tr" as the template according to the docs

◦item String, default: undefined ID to item template element or a string of HTML ( notice : does not work with <tr> )

Here is the link to the docs with this verbiage - http://listjs.com/docs/options

This should work though. Update your tbody to this and leave out the template in your options

 <tbody class="list">
    <tr id="search-item">
      <td class="flight"></td>
      <td class="departure"></td>
      <td class="arrival"></td>
      <td class="duration"></td>
      <td class="aircraft"></td>
      <td class="cat"></td>
      <td class="operation"></td>
      <td class="carrier"></td>
    </tr>
  </tbody>