On page load change input value and trigger

I am using list.js. When the page loads I would like to change the search bars value to "newvalue" and then trigger the search. What should happen is that no list items appear because nothing matches the search term. Unfortunately, while i've been able to get the search bar input value to change I can't seem to trigger the actual search itself. Ive tried focusing on input element before the value change, I've tried setting a timeout function, and i've tried using .change instead of .val. I'm not sure what the issue and at this point I'm not sure what else to do, so any help would be greatly appreciated.

//On page load change search value & simulate enter key press
$("document").ready(function() {
        $('input[name=searchBox]').val('newvalue').trigger(jQuery.Event('keypress', { keycode: 13 })); 
});





//List.js Stuff
var options = {
  valueNames: ['material', 'type', 'thickness', 'height', 'category', 'date']
};

var featureList = new List('piece-search', options);

$('#filter-material').change(function() {
  var selection = this.value;
});

.item {
  margin: 0.5em;
  padding: 0.5em;
  width: 150px;
  height: 150px;
  float: left;
  background: #229B55;
  color: #F4F4F4;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}

.item p {
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="page">
    <div id="main">
      <div class="c1">
        <div id="piece-search">
          <ul class="sort-by">
            <li>
              <input class="search" placeholder="Search pieces" name="searchBox">
            </li>
          </ul>
          <ul class="list">

            <li class="item">
              <p class="sorting-info hide-this">
                <p class="material">plastic</p>
                <p class="type">pipe</p>
                <p class="thickness">3mm</p>
                <p class="height">15inch+</p>
                <p class="category">artsy</p>
                <p class="date">20170101</p>
            </li>

            <li class="item">
              <p class="sorting-info hide-this">
                <p class="material">glass</p>
                <p class="type">pipe</p>
                <p class="thickness">5mm</p>
                <p class="height">14inch-</p>
                <p class="category">scientific</p>
                <p class="date">20170107</p>
            </li>
            
            <li class="item">
              <p class="sorting-info hide-this">
                <p class="material">glass</p>
                <p class="type">pipe</p>
                <p class="thickness">7mm</p>
                <p class="height">16inch-</p>
                <p class="category">scientific</p>
                <p class="date">20170209</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

Solution

You should use list api, using jquery trigger may not call list functions properly. See http://listjs.com/api/#search

 $("document").ready(function() {
            $('input[name=searchBox]').val('newvalue');
            featureList.search('newvalue');
    });