Knowledge Walls
Ammu
Hyderabad, Andhra Pradesh, India
Passcode:
Filter in JQuery of JQuery
61 Views
example
<!DOCTYPE html>
<head>
    <title> Learning how to access elements from</title>
    <script    src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
           $("#teachers_filter").keyup(function(){
               $("ul.teachers li").filter(function() {
                   var filterBy = $("#teachers_filter").val();
                   var currentName = $(this).html();
                   $(this).toggle(currentName.indexOf(filterBy) > -1);
                   /*
                   if (currentName.indexOf(filterBy) > -1) $(this).show();
                   else $(this).hide();
                   */
               });
               /*
               $("ul.teachers li").css("background-color","white");
               $("ul.teachers li").filter(function() {
                   var filterBy = $("#teachers_filter").val();
                   var currentName = $(this).html();
                   console.log(filterBy+"-"+currentName+"-"+(currentName.indexOf(filterBy) > -1));
                   if (currentName.indexOf(filterBy) > -1) {
                       return true;
                   }
                   else {
                       return false;
                   }
               }).css("background-color","red");
               */
           });
            
            
           $("#btn").click(function(){
              $(".teachers").toggle(false);
               
             //toggle - false - hide
             //toggle - true - show
           });
        });
    </script>
</head>
<body>
   <ul class="teachers" style="border: 1px solid red;">
        <li>Siva</li>
        <li>Vidhyaa</li>
        <li>Ram</li>
        <li>Lakshanya</li>
        <li>Praveen</li>
   </ul>
   <input type="text" id="teachers_filter">
   <button id="btn">Toggle</button>
</body>
</html>
Next Topics
Next lessons of current book.
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
Best Lessons of "JQuery"
Top lessons which are viewed more times.
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
JQuery 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