El código más pequeño posible para filtrar checkboxlist a través de javascript

Project no necesita ninguna librería javascript como jQuery, Dojo, Prototype, así que no hay una manera fácil, supongo. Me gustaría tener respuestas en profundidad para la pregunta que explica cómo se puede hacer esto. Como la mayoría de ustedes saben, asp.net checkboxlist emite un marcado como el siguiente en Flow repeatLayout.El código más pequeño posible para filtrar checkboxlist a través de javascript

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

No he puesto las etiquetas de cierre/cierre para simplificar. Tenemos una caja de texto para buscar a través de esta lista de casilla de verificación. Ahora viene la pregunta,

Cómo filtrar la casilla de verificación cuando el usuario escribe el término de búsqueda en el cuadro de texto y esconde la casilla de verificación + etiqueta sin coincidencia.

algunas más preguntas que me gustaría obtener respuestas para que se relacionan anteriormente

¿Hay algún proceso independiente confeccionado para este fin?
¿Hay un patrón, artículo, publicación que explique los fallos técnicos, puntos para recordar al proporcionar la funcionalidad de búsqueda? algo así como onkeydown don't do this,
Mi idea en este momento sería tener una colección en caché de etiquetas de la etiqueta innerHTML a continuación, recorrer cada etiqueta y comprobar que su término de búsqueda, cuando se encuentran ocultar todos los demás, pero sólo se muestran a juego. [Mi preocupación es qué va a pasar cuando lista es demasiado larga, en cada bucle de pulsación de tecla no es la mejor idea, supongo]

sus sugerencias, respuestas, soluciones, guiones son bienvenidos

Fuente

2011-09-06 Deeptechtons

Esta solución se basa en la respuesta de Ktash. Lo hice porque quiero aprender más sobre JavaScript, navegación DOM y RegExp.

Cambié el evento de "pulsación de tecla" con "keydown" ya que el anterior no se activa en el retroceso/eliminación, por lo que eliminar todos los caracteres con retroceso/eliminar aún dejó la lista filtrada.

[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(); 
     } 
    } 
}

Fuente

2011-09-07 07:18:22

@Razvan que es lo suficientemente exhaustiva para ser marcado como respuesta.Pero el crédito va a Ktash – Deeptechtons

Le di un +1 porque vino con el ideea básico :) que setTimeout/clearTimeout hace el truco –

@Razvan vi tu comentario anterior a comentar en esta respuesta – Deeptechtons

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);

no es perfecto, y no todos de la manera completa, pero debería ayudarte a empezar. Hay un retraso de 100 milisegundos antes de realizar el ciclo para que no se ejecute en cada pulsación de tecla, pero probablemente justo después de que hayan dejado de escribir. Probablemente quiera jugar con el valor un poco como mejor le parezca, pero le da la idea general. Además, no establecí las variables para inputField ni inputVal, pero supongo que ya sabría cómo tomarlas. Si sus etiquetas no son una carga de la lista estática, es probable que desee obtener la lista cada vez.

Fuente

2011-09-06 07:21:42 Ktash

servir para visualizar este hicieron guíame en forma correcta. ¿Recomiendan algún patrón para el mismo (quiero decir patrón de diseño) También esperaré hasta obtener más respuestas – Deeptechtons

@Ktash: +1 gracias por la respuesta :) –

El código más pequeño posible para filtrar checkboxlist a través de javascript

Respuesta

Cuestiones relacionadas