più piccolo codice possibile filtrare CheckBoxList tramite javascript

progetto non ha bisogno di librerie JavaScript come jQuery, Dojo, Prototype quindi non c'è modo semplice suppongo. Mi piacerebbe avere risposte approfondite per la domanda che spiega come si farebbe questo. Come molti di voi potrebbero sapere che l'elenco di checkbox di ASP.net emette un markup come sotto in Flow repeatLayout.più piccolo codice possibile filtrare CheckBoxList tramite javascript

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

Non ho inserito i tag di fine/chiusura per semplicità. Abbiamo una casella di testo per la ricerca attraverso questo elenco di checkbox.Ora arriva la domanda,

Come faccio a filtrare la checkbox quando l'utente digita il termine di ricerca nella casella di testo e nasconde la casella di controllo + etichetta ineguagliata.

alcune altre domande che vorrei ottenere risposte per che sono legati alla sopra

C'è un copione pronto STANDALONE fatta per questo scopo?
Esiste uno schema, un articolo, un post che spiega le anomalie, punti da ricordare e funzionalità di ricerca? qualcosa come onkeydown don't do this,
mia idea in questo momento sarebbe avere una collezione memorizzata nella cache del tag label innerHTML quindi collegare attraverso ogni tag e verificare la presenza di termine di ricerca, quando si trovano nascondere tutti gli altri, ma mostrano solo corrispondenti. [La mia preoccupazione è che cosa accadrà quando la lista è troppo lunga, in ogni looping pressione di un tasto non è la migliore idea suppongo]

vostro suggerimenti, risposte, soluzioni, gli script sono i benvenuti

fonte

2011-09-06 Deeptechtons

Questa soluzione è basata sulla risposta di Ktash. L'ho fatto perché voglio saperne di più su javascript, DOM navigazione e RegExp.

Ho modificato l'evento "keypress" con "keydown" poiché il precedente non si attiva su backspace/delete, quindi eliminando tutti i caratteri con backspace/delete rimane ancora l'elenco filtrato.

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

fonte

2011-09-07 07:18:22

@Razvan che è abbastanza esauriente da essere contrassegnato come risposta.Ma il merito va a Ktash – Deeptechtons

Gli ho dato +1 perché è venuto con l'ideea di base :) che setTimeout/clearTimeout fa il trucco –

@Razvan ho visto il tuo commento precedente a commentare questa risposta – 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);

non perfetto, e non tutti il modo completo, ma dovrebbe iniziare. C'è un ritardo di 100 millisecondi prima di eseguire il ciclo in modo che non venga eseguito su ogni pressione di un tasto, ma probabilmente subito dopo aver interrotto la digitazione. Probabilmente vorresti giocare con il valore un po 'come ritieni opportuno, ma ti dà l'idea generale. Inoltre, non ho impostato le variabili per inputField né inputVal, ma quelle che presumo sapresti già come afferrare. Se le tue etichette non sono un elenco statico, probabilmente vorrai ottenere l'elenco ogni volta.

fonte

2011-09-06 07:21:42 Ktash

bene questo fatto mi portano in modo giusto. Raccomanderesti un modello per lo stesso motivo (intendo lo schema di progettazione) Inoltre aspetterò fino a ottenere ulteriori risposte – Deeptechtons

@Ktash: +1 grazie per la risposta :) –

più piccolo codice possibile filtrare CheckBoxList tramite javascript

risposta

Problemi correlati