Most efficient way to use JavaScript to filter a checkboxlist

Question

Most efficient way to use JavaScript to filter a checkboxlist

Our project does not require the use of any javascript libraries such as jQuery, Dojo, or Prototype so finding a solution may be more challenging. I am looking for detailed answers to this question explaining how it can be accomplished. As many of you may be aware, an asp.net checkboxlist generates markup in Flow repeatLayout.

<span>
<checkbox><label></br>
<checkbox><label></br>
<checkbox><label></br>
</span>

I have omitted the closing tags for simplicity. There is a textbox for searching through this list of checkboxes. Now, here is my question:

How can I filter the checkboxlist when a user types a search term in the textbox and hide the unmatched checkboxes and labels?

Additionally, I have some related questions that I would like answers to:

Is there any standalone script available for this purpose?
Are there any patterns, articles, or posts explaining issues to consider while implementing search functionality? For example, something like onkeydown do's and don'ts.
My current idea involves having a cached collection of label tags' `innerHTML`, then looping through each tag to check for the search term. When found, hide all others but only show matching ones. However, I am concerned about performance implications with a long list. Is there a better approach that doesn't involve looping on every keypress?

Your suggestions, solutions, scripts, and answers are greatly appreciated.

javascript asp.net search controls checkboxlist

Answer 1

Answer №1

This unique solution was inspired by Ktash's answer, as I sought to expand my knowledge of javascript, DOM navigation, and RegExp.

I opted to switch the "keypress" event to "keydown" to ensure that backspace/delete actions would still trigger filtering, unlike before.

[CustomPage.html]

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RealtimeCheckBoxListFiltering.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript">
    window.onload = function () {
      var tmr = false;
      var labels = document.getElementById('cblItem').getElementsByTagName('label');
      var func = function () {
        if (tmr)
          clearTimeout(tmr);
        tmr = setTimeout(function () {
          var regx = new RegExp(document.getElementById('inputSearch').value);
          for (var i = 0, size = labels.length; i < size; i++)
            if (document.getElementById('inputSearch').value.length > 0) {
              if (labels[i].textContent.match(regx)) setItemVisibility(i, true);
              else setItemVisibility(i, false);
            }
            else
              setItemVisibility(i, true);
        }, 500);

        function setItemVisibility(position, visible)
        {
          if (visible)
          {
            labels[position].style.display = '';
            labels[position].previousSibling.style.display = '';
            if (labels[position].nextSibling != null)
              labels[position].nextSibling.style.display = '';
          }
          else
          {
            labels[position].style.display = 'none';
            labels[position].previousSibling.style.display = 'none';
            if (labels[position].nextSibling != null)
              labels[position].nextSibling.style.display = 'none';

          }
        }
      }

      if (document.attachEvent) document.getElementById('inputSearch').attachEvent('onkeypress', func);  // IE compatibility
      else document.getElementById('inputSearch').addEventListener('keydown', func, false); // other browsers
    };
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <table>
    <tr>
      <td>
        <asp:TextBox runat="server" ID="inputSearch" ClientIDMode="Static" />
      </td>
    </tr>
    <tr>
      <td>
        <asp:CheckBoxList runat="server" ID="cblItem" ClientIDMode="Static" RepeatLayout="Flow" />
      </td>
    </tr>
  </table>
  </form>
</body>
</html>

[CustomPage.aspx.cs]

using System;
using System.Collections.Generic;

namespace RealtimeCheckBoxListFiltering
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            cblItem.DataSource = new List<string>() { "qwe", "asd", "zxc", "qaz", "wsx", "edc", "qsc", "esz" };
            cblItem.DataBind();
        }
    }
}

Answer 2

This unique solution was inspired by Ktash's answer, as I sought to expand my knowledge of javascript, DOM navigation, and RegExp.

I opted to switch the "keypress" event to "keydown" to ensure that backspace/delete actions would still trigger filtering, unlike before.

[CustomPage.html]

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RealtimeCheckBoxListFiltering.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript">
    window.onload = function () {
      var tmr = false;
      var labels = document.getElementById('cblItem').getElementsByTagName('label');
      var func = function () {
        if (tmr)
          clearTimeout(tmr);
        tmr = setTimeout(function () {
          var regx = new RegExp(document.getElementById('inputSearch').value);
          for (var i = 0, size = labels.length; i < size; i++)
            if (document.getElementById('inputSearch').value.length > 0) {
              if (labels[i].textContent.match(regx)) setItemVisibility(i, true);
              else setItemVisibility(i, false);
            }
            else
              setItemVisibility(i, true);
        }, 500);

        function setItemVisibility(position, visible)
        {
          if (visible)
          {
            labels[position].style.display = '';
            labels[position].previousSibling.style.display = '';
            if (labels[position].nextSibling != null)
              labels[position].nextSibling.style.display = '';
          }
          else
          {
            labels[position].style.display = 'none';
            labels[position].previousSibling.style.display = 'none';
            if (labels[position].nextSibling != null)
              labels[position].nextSibling.style.display = 'none';

          }
        }
      }

      if (document.attachEvent) document.getElementById('inputSearch').attachEvent('onkeypress', func);  // IE compatibility
      else document.getElementById('inputSearch').addEventListener('keydown', func, false); // other browsers
    };
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <table>
    <tr>
      <td>
        <asp:TextBox runat="server" ID="inputSearch" ClientIDMode="Static" />
      </td>
    </tr>
    <tr>
      <td>
        <asp:CheckBoxList runat="server" ID="cblItem" ClientIDMode="Static" RepeatLayout="Flow" />
      </td>
    </tr>
  </table>
  </form>
</body>
</html>

[CustomPage.aspx.cs]

using System;
using System.Collections.Generic;

namespace RealtimeCheckBoxListFiltering
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            cblItem.DataSource = new List<string>() { "qwe", "asd", "zxc", "qaz", "wsx", "edc", "qsc", "esz" };
            cblItem.DataBind();
        }
    }
}

Answer 3

Answer №2

let timerActive = false;
let labelElements = document.getElementsByTagName('label');
let searchFunction = function() {
    if (timerActive) clearTimeout(timerActive);
    timerActive = setTimeout(function () {
        let regexPattern = new RegExp(inputValue); /* Input value here */
        for(let index = 0, total = labelElements.length; index < total; index++) {
            if(regexPattern.test(labelElements[index].textContent || labelElements[index].innerText)) {
                labelElements[index].style.display = 'block';
            } else {
                labelElements[index].style.display = 'none';
            }
        }
    }, 100);
};
if (document.attachEvent) inputField.attachEvent('onkeypress', searchFunction);
else inputField.addEventListener('keypress', searchFunction, false);

This code snippet serves as a starting point and may need further refinement. A delay of 100 milliseconds is set before executing the loop to avoid running on every keypress but rather after typing stops. You can adjust this duration as needed. Variables for inputField and inputValue are not defined in this example assuming you already know how to obtain them. If your labels dynamically change, consider fetching the list each time.

Answer 4

let timerActive = false;
let labelElements = document.getElementsByTagName('label');
let searchFunction = function() {
    if (timerActive) clearTimeout(timerActive);
    timerActive = setTimeout(function () {
        let regexPattern = new RegExp(inputValue); /* Input value here */
        for(let index = 0, total = labelElements.length; index < total; index++) {
            if(regexPattern.test(labelElements[index].textContent || labelElements[index].innerText)) {
                labelElements[index].style.display = 'block';
            } else {
                labelElements[index].style.display = 'none';
            }
        }
    }, 100);
};
if (document.attachEvent) inputField.attachEvent('onkeypress', searchFunction);
else inputField.addEventListener('keypress', searchFunction, false);

This code snippet serves as a starting point and may need further refinement. A delay of 100 milliseconds is set before executing the loop to avoid running on every keypress but rather after typing stops. You can adjust this duration as needed. Variables for inputField and inputValue are not defined in this example assuming you already know how to obtain them. If your labels dynamically change, consider fetching the list each time.

Most efficient way to use JavaScript to filter a checkboxlist

Answer №1

Answer №2

Similar questions

I am having trouble with using document.getElementById().value to retrieve text input. Can anyone help me understand why it's not

Loading CSS files conditionally in Angular2's index.html

Integrate dat.GUI directly into a THREE.js scene without the use of an <iframe> tag

The efficiency of upsert operations diminishes as the size of the collection (number of documents) increases

What are the benefits of incorporating a mock AJAX call in testing scenarios?

When I attempted to download a file by clicking on the download button in a gridview in asp

Exploring the different pages in React js

The context provider in Next.js wraps the App component with a layout component specific to each page, resulting in data

What is the process for transferring an environment.json file to the output directory and then utilizing it with Webpack 4?

"How can you enhance the performance of JavaScript and CSS in a Chrome Extension without using exclude_matches/globs or excluding domains

How come emphasizing certain characters in a string doesn't display the <b> tag in React.js?

Why is the responseText of an AJAX request empty on Chrome?

I'm currently experiencing a challenge with a project I'm tackling that specifically deals with chart.js

Tips on using Visual Studio Code to troubleshoot Angular 4 unit tests

I'm looking for a tag cloud widget that can handle JSON objects. Any suggestions?

Receiving communication without the need for port forwarding

Activate current event on newly added elements

freshly opened window shutting down right after its inception

Ways to conceal a button within .net 2010?

Choose all div elements with a specified class from a variable