Bootstrap 3

[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>


 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS3 - HOME (소개) - BS3 vs BS4 차이 (= BS차이)
basic BS3 - Start (시작) ★ - BS다운 / BSCDN / BS구문
basic BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)
basic BS3 - Text/Typography(BS글자 = BS텍스트) (= BS4글자 vs BS3글자) BS글자색
basic BS3 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS3 - Image (BS이미지) - 반응형이미지 + 반응형동영상 + 이미지정렬
basic BS3 - Jumbotron/page-header (BS점보트론 / BS페이지헤더) - 큰글씨, 글자키우기
basic BS3 - Well (BS웰 = BS회색상자) ★ - BS회색배경상자 (= BS회색박스 = BS웰클래스)
basic BS3 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS3 - Button (BS버튼) ★ - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS3 - Button Group (BS버튼그룹) ★
basic BS3 - Icon (아이콘) - Glyphicon/Font Awesome/Google Material De…
basic BS3 - Progress Bar (BS진행바 = BS진행상태표시 = BS진도바 = BS프로그레스바) - I…
basic BS3 - Pagination (BS페이징 = BS페이지번호 = BS페이징 = BS패지네이션) + Bread…
basic BS3 - Pager (BS페이저) - 이전페이지/다음페이지 (= 앞으로가기/뒤로가기)
1/4
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인