Knowledge Walls
Venkatesan
Hyderabad, Andhra Pradesh, India
Passcode:
Filter on Loaded data in Jquery Exercises of JQuery
2322 Views
How to do filter with loaded info in HTML with JQuery? 
It has set of loaded names. With start range and end range of letter have to show or hide the names.
HTML
<div class="header_div"><b>Names</b></div>

<div class="names_div">
    <div class="a_letter">Aashay</div>
    <div class="a_letter">Aashish</div>
    <div class="a_letter">Abdul-Azeez</div>
    <div class="a_letter">Abdul-Baari</div>
    <div class="a_letter">Abdul-Ghafoor</div>
    <div class="a_letter">Abdul-Haafiz</div>
    <div class="a_letter">Abdul-Hameed</div>
    <div class="a_letter">Abhayaprada</div>
    <div class="a_letter">Abheek</div>
    <div class="a_letter">Abhi</div>
    <div class="b_letter">Baahir</div>
    <div class="b_letter">Baalaark</div>
    <div class="b_letter">Baanbhatt</div>
    <div class="b_letter">Baanke Bihaari</div>
    <div class="b_letter">Baasim</div>
    <div class="b_letter">Babala</div>
    <div class="b_letter">Badal</div>
    <div class="c_letter">Chaanakya</div>
    <div class="c_letter">Chaaruchandra</div>
    <div class="c_letter">Chaarudatt</div>
    <div class="c_letter">Chaaruhaas</div>
    <div class="c_letter">Chahel</div>
    <div class="c_letter">Chaitan</div>
    <div class="d_letter">Daamodar</div>
    <div class="d_letter">Daaruk</div>
    <div class="d_letter">Daarun</div>
    <div class="d_letter">Dahana</div>
    <div class="d_letter">Daha</div>
    <div class="d_letter">Daitya</div>
    <div class="d_letter">Daivya</div>
    <div class="d_letter">Daiwik</div>
    <div class="e_letter">Eashan</div>
    <div class="e_letter">Ebadaah</div>
    <div class="e_letter">Edhas</div>
    <div class="e_letter">Edi</div>
    <div class="e_letter">Ednit</div>
    <div class="e_letter">Eeshwar</div>
    <div class="e_letter">Egaiarasu</div>
    <div class="e_letter">Eha</div>
</div>

<div id="start_at_div" class="range_selector">
    Start at:
    <div>
        <input type="radio" name="start_at" checked value="97" />A</div>
    <div>
        <input type="radio" name="start_at" value="98" />B</div>
    <div>
        <input type="radio" name="start_at" value="99" />C</div>
    <div>
        <input type="radio" name="start_at" value="100" />D</div>
    <div>
        <input type="radio" name="start_at" value="101" />E</div>
</div>

<div id="end_at_div" class="range_selector">
    End at:
    <div>
        <input type="radio" name="end_at" checked value="97" />A</div>
    <div>
        <input type="radio" name="end_at" value="98" />B</div>
    <div>
        <input type="radio" name="end_at" value="99" />C</div>
    <div>
        <input type="radio" name="end_at" value="100" />D</div>
    <div>
        <input type="radio" name="end_at" value="101" />E</div>
</div>

<button id="do_filter">Show</button>
JQuery
$(function(){
    $("#do_filter").click(function(){
       var start_range = $("#start_at_div input:radio[name=start_at]:checked").val();
       var end_range = $("#end_at_div input:radio[name=end_at]:checked").val();
       
       if (start_range > end_range){
         alert("Invalid range");
       }
       else {
         $(".names_div div").hide();
         for (var i=start_range;i<=end_range;i++){
            $(".names_div div."+String.fromCharCode(i)+"_letter").show();
         }
       }
    });
});
CSS
.range_selector {
   display: block;
}

.range_selector div {
   display: inline-block;
}

.names_div {
   margin: 10px 0px;
}

.header_div {
   font-family: arial;
   font-size: 22px;
}
Demo link 
Next Topics
Next lessons of current book.
Event handler methods of JQuery
Previous Topics
Previous lessons of current book.
HTML Form of JQuery
HTML Insertion of JQuery
HTML Insertion of JQuery
Best Lessons of "JQuery"
Top lessons which are viewed more times.
HTML Insertion of JQuery
HTML Insertion of JQuery
HTML Insertion of JQuery
HTML Insertion of JQuery
Form Validation of JQuery
HTML Form of JQuery
HTML Insertion of JQuery
HTML Insertion of JQuery
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details