All geek questions in one place

The smallest code that can be filtered using checkboxlist via javascript

No javascript libraries are needed for the project, such as jQuery, Dojo, Prototype, so there is no easy way, I suppose. I would like to receive detailed answers to a question explaining how to do this. Since most of you may know that asp.net checkboxlist emits markup, as shown below, in Flow repeatLayout.

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

I did not put end / close tags for simplicity. We have a text box to search on this list of checkboxes. Now the question is,

How to filter a flag when a user enters a search query in a text box and hides the unsurpassed + flag.

some more questions that I would like to receive answers related to above

  • Is there a ready-made STANDALONE script for this?

  • Is there a template, article, message explaining glitches, points to remember when providing search functions? something like onkeydown don't do this,

  • My idea right now will have a cached collection of innerHTML tag labels, then scroll through each tag and check the search query, if it is found, hide all the others, but show only a match. [My problem is what happens when the list is too long, on every keystroke is not a good idea, I suppose]

Your suggestions, answers, solutions, scenarios are welcome

+6
source share
2 answers

This solution is based on Ktash's answer. I did this because I want to learn more about javascript, DOM, and RegExp.

I changed the "keypress" event from "keydown" since the previous one does not fire when backspace / delete, so deleting all characters with backspace / delete is still in the list.

[Default.aspx]

 <%@ 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>

[Default.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(); } } }
+7
source 
 var tmr = false; var labels = document.getElementsByTagName('label') var func = function() { if (tmr) clearTimeout(tmr); tmr = setTimeout(function () { var regx = new Regex(inputVal); /* Input value here */ for(var i = 0, size = labels.length; i < size; i++) { if(regx.match(labels[i].textContent || labels[i].innerText)) labels[i].style.display = 'block'; else labels[i].style.display = 'none'; } }, 100); } if (document.attachEvent) inputField.attachEvent('onkeypress', func); else inputField.addEventListener('keypress', func, false);

Not perfect, and not all the way over, but it should make you start with it. A delay of 100 milliseconds before it executes a loop so that it does not start every time a key is pressed, but probably right after they stop typing. You may want to play with the value a little on your own, but that gives you a general idea. Also, I did not set variables for inputField and inputVal , but I assume that you already know how to capture. If your tags are not a static list, you probably want to get the list every time.

+7
source

Source: https://habr.com/ru/post/896685/

More articles:


All Articles