सबसे छोटा कोड संभव checkboxlist जावास्क्रिप्ट के माध्यम से

परियोजना ऐसे jQuery, डोजो के रूप में किसी भी जावास्क्रिप्ट लाइब्रेरियों की जरूरत नहीं है फिल्टर करने के लिए, प्रोटोटाइप तो वहाँ कोई आसान तरीका मैं लगता है। मैं इस प्रश्न के गहन जवाब देना चाहता हूं कि यह कैसे समझाएगा। चूंकि आप में से अधिकांश को एएसपीनेट चेकबॉक्स सूची पता हो सकती है जैसे Flow दोहराना में नीचे एक मार्कअप उत्सर्जित करता है।सबसे छोटा कोड संभव checkboxlist जावास्क्रिप्ट के माध्यम से

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

मैंने सादगी के लिए समापन/समापन टैग नहीं डाले हैं। हमारे पास चेकबॉक्स की इस सूची के माध्यम से खोज करने के लिए एक टेक्स्टबॉक्स है। अब सवाल आता है,

जब मैं टेक्स्टबॉक्स में खोज शब्द टाइप करता हूं और बेजोड़ चेकबॉक्स + लेबल छुपाता हूं तो मैं चेकबॉक्स सूची कैसे फ़िल्टर करूं?

कुछ और सवाल मैं जवाब मिल रहा है कि इसके बाद के संस्करण

से जुड़े हुए हैं के लिए वहाँ इस उद्देश्य के लिए किसी भी तैयार कर दिया स्टैंडअलोन स्क्रिप्ट है चाहते हैं
?
वहाँ एक पैटर्न, लेख, पोस्ट खामियों समझा, जबकि खोज की कार्यक्षमता प्रदान याद की ओर इशारा करता है? onkeydown don't do this, की तरह कुछ
मेरा उपाय अभी होगा होना प्रत्येक टैग के माध्यम से innerHTML तो पाश लेबल टैग की कैश्ड संग्रह है और खोज पद के लिए जाँच, जब अन्य सभी छिपाने पाया लेकिन केवल मिलान है। [मेरी चिंता का विषय है कि क्या होगा है जब सूची बहुत लंबी है, हर कुंजी दबाने पाशन पर है सबसे अच्छा विचार है नहीं मैं लगता है]

आपके सुझावों, उत्तर, समाधान, लिपियों स्वागत

स्रोत

2011-09-06 Deeptechtons

यह समाधान कट्टाश के उत्तर पर आधारित है। मैंने इसे बनाया क्योंकि मैं जावास्क्रिप्ट, डोम नेविगेटिंग और RegExp के बारे में अधिक जानना चाहता हूं।

मैंने "कीडप्रेस" ईवेंट को "कीडाउन" के साथ बदल दिया क्योंकि पिछला बैकस्पेस/डिलीट पर ट्रिगर नहीं करता है इसलिए बैकस्पेस/डिलीट वाले सभी पात्रों को हटाकर अभी भी फ़िल्टर की गई सूची छोड़ दी गई है।

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

स्रोत

2011-09-07 07:18:22

@Razvan जो उत्तर के रूप में चिह्नित होने के लिए पर्याप्त है।लेकिन क्रेडिट Ktash – Deeptechtons

पर जाता है मैंने उसे मूल विचार के साथ +1 कारण दिया था :) कि सेटटाइम/clearTimeout चाल –

@Razvan मैंने आपकी टिप्पणी को इस उत्तर पर टिप्पणी करने के लिए पिछली टिप्पणी देखी – 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);

सही नहीं है, और सभी नहीं कर रहे हैं रास्ता पूरा हो गया है, लेकिन आपको इसे शुरू करना चाहिए। लूप करने से पहले 100 मिलीसेकंड विलंब होता है ताकि वह प्रत्येक कीप्रेस पर नहीं चलेगा, लेकिन टाइपिंग बंद करने के बाद ही संभवतः। संभवतः आप फिट के रूप में थोड़ा सा मूल्य खेलना चाहते हैं, लेकिन यह आपको सामान्य विचार देता है। इसके अलावा, मैंने inputField और inputVal के लिए वेरिएबल सेट नहीं किए हैं, लेकिन मुझे लगता है कि आप पहले ही जानते होंगे कि कैसे पकड़ना है। यदि आपके लेबल स्थिर सूची ऑनलोड नहीं हैं, तो आप शायद हर बार सूची प्राप्त करना चाहेंगे।

स्रोत

2011-09-06 07:21:42 Ktash

अच्छी तरह से यह मेरे सही तरीके से नेतृत्व किया था। क्या आप इसके लिए किसी भी पैटर्न की सिफारिश करते हैं (मेरा मतलब डिजाइन पैटर्न है) इसके अलावा मैं तब तक इंतजार करूंगा जब तक मुझे और जवाब नहीं मिलते – Deeptechtons

@Ktash: +1 उत्तर के लिए धन्यवाद :) –

सबसे छोटा कोड संभव checkboxlist जावास्क्रिप्ट के माध्यम से

उत्तर

संबंधित मुद्दे