Web Tutorial: The List View (Part 4/4)

So far we have been working solely with March 2025 data. It's a limited subset of the entire dataset, which is why we could perform paging, sorting and all that, in the front-end. It was a deliberate design decision. This pattern will not scale if you have an unlimited dataset.

With that in mind, we will provide an interface for the user to get the rest of the data. In the topmost div, listFilters, add this HTML. It's a drop-down list.

<div id="listFilters">
  <label>
    Period:
    <select id="ddlPeriod">
      <option value="3">March 2025</option>
      <option value="4">April 2025</option>
    </select>          
  </label>

  <hr />
</div>  

So far, we only have March and April 2025 records, so this is easy - just have the drop-down list run getRecords() with 2025 as the argument for year, and the selected value as the argument for month.

<div id="listFilters">
  <label>
    Period:
    <select id="ddlPeriod" onchange="lv.getRecords(2025, this.value);">
      <option value="3">March 2025</option>
      <option value="4">April 2025</option>
    </select>          
  </label>

  <hr />
</div>  

The CSS for labels is just to bold the text.

  .asc:after
  {
    content: "\25B2";
  }

  .desc:after
  {
    content: "\25BC";
  }

  label
  {
    font-weight: bold;
  }
</style>

Don't need to do much else.

There, these are April borrowing records!

Now for the Search function

Add a space and another label tag, and insert the txtSearch textbox.

<div id="listFilters">
  <label>
    Period:
    <select id="ddlPeriod" onchange="lv.getRecords(2025, this.value);">
      <option value="3">March 2025</option>
      <option value="4">April 2025</option>
    </select>          
  </label>

   &nbsp;

  <label>
    Search:
    <input id="txtSearch" placeholder="Search term, e.g, orange" />
  </label>

  <hr />
</div>  

Have it run setSearch() with its current value, whenever someone types stuff in the box.

<div id="listFilters">
  <label>
    Period:
    <select id="ddlPeriod" onchange="lv.getRecords(2025, this.value);">
      <option value="3">March 2025</option>
      <option value="4">April 2025</option>
    </select>          
  </label>

   

  <label>
    Search:
    <input id="txtSearch" placeholder="Search term, e.g, orange" value="" oninput="lv.setSearch(this.value);" />
  </label>

  <hr />
</div>  

This is the setSearch() method. It has a parameter, searchTerm. We start with a return statement.

setPageSize: function(pageSize)
{
  this.pageSize = pageSize;
  this.pageNo = 1;
  this.filterRecords();
  this.renderPageInfo();

  return;
},
setSearch: function(searchTerm)
{
  return;
},
toggleSort: function(col, id)
{

Now we set the search property. If searchTerm is longer than 2 characters, we convert to lowercase and set it. If not, we set search to an empty string.

setSearch: function(searchTerm)
{
  this.search = (searchTerm.length > 2 ? searchTerm.toLowerCase() : "");

  return;
},

Then we run filterRecords() and renderPageInfo().

setSearch: function(searchTerm)
{
  this.search = (searchTerm.length > 2 ? searchTerm.toLowerCase() : "");
  this.filterRecords();
  this.renderPageInfo();

  return;
},

In filterRecords(), before sorting, we filter according to the search term. We first check if action needs to be taken. If search is less than 2 characters, we won't bother.

filterRecords: function()
{
  $("#listRows").html("");

  var filtered = structuredClone(this.records);

  if (this.search.length > 2)
  {

  }

  if (this.sort.length > 0)
  {
    this.sort.forEach(

We then filter the filtered array using the filter() method.

if (this.search.length > 2)
{
  filtered = filtered.filter
  (
    (x) =>
    {

    }
  );
}

We check against the title, category, author and name properties, all converted to lowercase, against the search property, and return true if there is any match.

if (this.search.length > 2)
{
  filtered = filtered.filter
  (
    (x) =>
    {
      return (
        x.title.toLowerCase().indexOf(this.search) > -1 ||
        x.category.toLowerCase().indexOf(this.search) > -1 ||
        x.author.toLowerCase().indexOf(this.search) > -1 ||
        x.name.toLowerCase().indexOf(this.search) > -1
      );
    }
  );
}

Let's also remove the red outlines since we hve no more layout changes to make.

div {outline: 0px solid red;}

Let's try typing in "orange" like the nice placeholder text recommends. Start with "or". See how nothing happens.

Now add "a" for "ora". Now see the results change dramatically. They display because "ora" was in the title, or because the author was "Dora" "Deborah", "Flora" or "Coral".

Try the full term "orange". Now there's only one result!

Now switch the records to April 2025. Can you see the logic behind this?

We're done here! Thanks for participating!

Play around with your list view. Try out the features we made.

Orange you glad we did this?!
T___T