jquery searchable 다운로드 - jquery searchable 소스 코드 다운로드

jquery searchable

기타 소스코드

vents

다운로드

jQuery 검색 가능 플러그인

최신 버전: v1.1.0 (변경 로그 보기)

입력하는 동안 요소를 검색할 수 있는 작고 빠른 jQuery 플러그인입니다. 이 플러그인은 Stidges ( Twitter | Github )에서 만들고 유지 관리합니다.

특징

경량 . 이 플러그인은 ~1kB만 축소되고 gzip으로 압축되었습니다!
빠른 . 이 플러그인은 대규모 요소 세트에서도 빠르고 지연 없는 검색에 최적화되어 있습니다.
다양한 검색 유형 . 이 플러그인은 기본적으로 세 가지 검색 유형을 제공합니다! 퍼지 일치, 엄격한(대소문자 구분) 일치 및 기본(대소문자 구분 안 함) 일치.
자동 행 스트라이핑 . 테이블을 검색할 때 일치하지 않는 행이 숨겨집니다. Bootstrap과 같은 CSS 프레임워크를 사용하면 테이블 스트라이핑이 엉망이 됩니다. 이 플러그인을 사용하면 홀수 행과 짝수 행에 적용할 CSS를 정의하고 검색하는 동안 이를 업데이트할 수 있습니다.
사용자 정의 표시/숨기기 . 검색하는 동안 요소를 표시하고 숨기기 위한 사용자 정의 기능을 정의할 수 있습니다.
무엇이든 검색하세요 . 이 플러그인은 테이블에서만 사용하도록 제한되지 않으며 내부에 '행'과 '열'이 있는 모든 요소 세트를 사용할 수 있습니다.

데모

이 플러그인의 실제 데모를 보려면 여기를 클릭하세요(Bootsnipp에서 호스팅됨).

시작하기

기본 사용법

이 플러그인을 다운로드한 후 jQuery를 로드한 후 HTML 파일에 포함하세요.

 < script src =" jquery.js " > </ script >
< script src =" jquery.searchable.js " > </ script >

참고 : <IE9와 같은 이전 브라우저를 지원하려면 jquery.searchable.js 대신 jquery.searchable-ie.js 를 사용할 수 있습니다. 이 버전에는 Array.prototype.reduce 함수에 대한 폴리필이 포함되어 있으므로 약간 더 큽니다(몇백 바이트).

그런 다음 원하는 요소에서 플러그인을 간단히 초기화할 수 있습니다. 이 예에서는 ID가 'table'인 테이블을 사용합니다. 기본적으로 플러그인은 ID가 'search'인 입력을 사용합니다(아래 구성 섹션에서 이를 변경하는 방법을 읽어보세요).

 $ ( '#table' ) . searchable ( ) ;

구성

이 플러그인은 다음 구성 옵션을 제공합니다.

옵션	기본값	설명
선택자	`'tbody tr'`	플러그인이 초기화되는 요소 내에서 기본 jQuery 선택기를 정의합니다. 이는 테이블 내의 `tr` 또는 검색 가능한 요소 내의 `div.your-special-class` 와 같이 표시하거나 숨길 컨테이너 요소를 선택합니다.
자식선택기	`'td'`	위에 정의된 '선택기' 내에서 하위 선택기를 정의합니다. 이는 `td` 또는 `.searchable` 과 같은 'selector' 요소 내에서 검색 가능한 요소를 선택합니다.
검색필드	`'#search'`	검색 입력 필터에 사용되는 입력 요소
줄무늬	`false`	요소가 스트라이프되고 검색 시 다시 스트라이프되어야 하는지 여부를 정의합니다( `true` 또는 `false` ).
이상한 행	`{ }`	홀수 행에 적용할 CSS 객체를 정의합니다( `striped` `true` 로 설정된 경우).
짝수	`{ }`	짝수 행에 적용할 CSS 객체를 정의합니다( `striped` `true` 로 설정된 경우).
숨다	`function`	사용자 정의 숨기기 기능을 정의할 수 있습니다. 이 함수는 숨겨진 요소(행)인 하나의 매개변수를 허용합니다. 기본적으로 `elem.hide()` 사용하여 행을 숨깁니다.
보여주다	`function`	사용자 정의 표시 기능을 정의할 수 있습니다. 이 함수는 숨겨진 요소(행)인 하나의 매개변수를 허용합니다. 기본적으로 `elem.show()` 사용하여 행을 표시합니다.
검색 유형	`'default'`	검색 시 사용할 매처를 정의합니다. 허용되는 값은 `'fuzzy'` , `'strict'` 및 `'default'` 입니다.
onSearchActive	`false`	검색이 활성화될 때 호출할 함수를 정의할 수 있습니다. 이 함수는 사용자가 검색 입력을 입력하고 검색 입력이 비어 있지 않을 때마다 호출됩니다. 검색 가능한 요소와 검색어가 함수에 전달됩니다.
onSearchEmpty	`false`	검색 입력이 비어 있을 때 호출할 함수를 정의할 수 있습니다. 이 함수는 검색 입력이 비어 있거나 지워졌을 때 한 번 호출됩니다. 검색 가능한 요소가 함수에 전달됩니다.
onSearchFocus	`false`	검색 입력에 초점이 맞춰졌을 때 호출할 함수를 정의할 수 있습니다. 이 함수의 `this` 컨텍스트는 검색 입력 요소가 됩니다.
onSearchBlur	`false`	검색 입력이 흐리게 표시될 때 호출할 함수를 정의할 수 있습니다. 이 함수의 `this` 컨텍스트는 검색 입력 요소가 됩니다.
클리어온로드	`false`	페이지 로드 시 검색 입력을 지워야 하는지 여부를 결정합니다( `true` 또는 `false` ).

사용 예

이 예에서는 위에 표시된 구성을 사용하여 플러그인을 사용자 정의합니다.

 $ ( '#element' ) . searchable ( {
    selector      : '.row' ,
    childSelector : '.column' ,
    searchField   : '#mySearchInput' ,
    striped       : true ,
    oddRow        : { 'background-color' : '#f5f5f5' } ,
    evenRow       : { 'background-color' : '#fff' } ,
    hide          : function ( elem ) {
        elem . fadeOut ( 50 ) ;
    } ,
    show          : function ( elem ) {
        elem . fadeIn ( 50 ) ;
    } ,
    searchType    : 'fuzzy' ,
    onSearchActive : function ( elem , term ) {
        elem . show ( ) ;
    } ,
    onSearchEmpty : function ( elem ) {
        elem . hide ( ) ;
    } ,
    onSearchFocus : function ( ) {
        $ ( '#feedback' ) . show ( ) . text ( 'Type to search.' ) ;
    } ,
    onSearchBlur : function ( ) {
        $ ( '#feedback' ) . hide ( ) ;
    } ,
    clearOnLoad : true
} ) ;

변경 내역

버전 1.0.0:

최초 출시.

버전 1.1.0:

검색 수명 주기 동안 사용자 정의 함수를 호출할 수 있는 몇 가지 이벤트(onSearchActive, onSearchEmpty, onSearchFocus, onSearchBlur)를 추가했습니다(자세한 내용은 구성 참조).
페이지 로드/새로 고침 시 검색 입력을 지울 수 있는 clearOnLoad 설정을 추가했습니다.