• Q&A
  • 회원가입
  • 로그인

[basic] BS3 - Filter (BS필터 - 테이블검색필터/리스트검색필터/드롭다운검색필터/텍스트검색필터)

BS 테이블검색필터


<!DOCTYPE html>

<html lang="ko">

<head>

  <title>검색 필터 예제</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>


<div class="container">

  <input class="form-control" id="hzInput" type="text" placeholder="Search..">

  <br>

  <table class="table table-bordered table-striped">

    <thead>

      <tr>

        <th>등급</th>

        <th>과정</th>

        <th>설명</th>

      </tr>

    </thead>

    <tbody id="hzTable">

      <tr>

        <td>초급</td>

        <td>HTML</td>

        <td>홈페이지 기본 뼈대</td>

      </tr>

      <tr>

        <td>중급</td>

        <td>CSS</td>

        <td>홈페이지 디자인</td>

      </tr>

      <tr>

        <td>고급</td>

        <td>JS</td>

        <td>홈페이지 동적 기능</td>

      </tr>

    </tbody>

  </table>

</div>


<script>

$(document).ready(function(){

  $("#hzInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#hzTable tr").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>


</body>

</html>


 

※ $(this) 의 text를 소문자로 변경한 값이 value를 포함하고 있다면 $(this)를 toggle 해라.
toggle() 작동법 : 검색과 일치하지 않는 행을 숨기는 역할. (display : none 처리)
   기본적으로 visible 이면 invisible 로, invisible 이면 visible 로 설정"하지만
   안에 참거짓 (boolean)을 쓴 경우에는 true면 show, false면 hide시킴.
※ toLowerCase () 작동법 : 텍스트를 소문자로 변환해 검색에서 대소 문자를 구분하지 않는 역할.

 

 

BS 리스트검색필터


<!DOCTYPE html>

<html lang="ko">

<head>

  <title>리스트 검색 필터</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>


<div class="container">

  <input class="form-control" id="hzInput" type="text" placeholder="Search..">

  <br>

  <ul class="list-group" id="hzList">

    <li class="list-group-item">HTML</li>

    <li class="list-group-item">CSS</li>

    <li class="list-group-item">JS</li>

  </ul>  

</div>


<script>

$(document).ready(function(){

  $("#hzInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#hzList li").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>


</body>

</html>


 


 

BS드롭다운 검색필터


<!DOCTYPE html>

<html lang="ko">

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>

  /* input 입력창 스타일 */

  #hzInput {

    padding: 20px;

    margin-top: -6px;

    border: 0;

    border-radius: 0;

   color:white;

    background: black;

  }

  </style>

</head>

<body>


<div class="container">

  <div class="dropdown">

    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
          메뉴보기 <span class="caret"></span>
   </button>

    <ul class="dropdown-menu">

      <input class="form-control" id="hzInput" type="text" placeholder="Search..">

      <li><a href="#">HTML</a></li>

      <li><a href="#">CSS</a></li>

      <li><a href="#">JS</a></li>

      <li><a href="#">jQuery</a></li>

      <li><a href="#">SQL</a></li>

      <li><a href="#">PHP</a></li>

    </ul>

  </div>

</div>


<script>

$(document).ready(function(){

  $("#hzInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $(".dropdown-menu li").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>


</body>

</html>


 

 

 

BS텍스트검색필터


<!DOCTYPE html>

<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>


<div class="container">

  <input class="form-control" id="hzInput" type="text" placeholder="Search..">

  <div id="hzDIV">

    <p>HTML</p>

    <div>CSS</div>

    <button class="btn">JS</button>

    <button class="btn btn-info">SQL</button>

    <p>PHP</p>

  </div>

</div>


<script>

$(document).ready(function(){

  $("#hzInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#hzDIV *").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>


</body>

</html>


 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012