홈페이지>프로그래밍 관련>기타 소스코드
다운로드

페이지 내에서 빠르고 쉽게 검색할 수 있습니다.

Holmes는 ~2KB의 input 값을 기반으로 요소 목록을 필터링합니다.

설치

holmes.js 패키지 이름 아래 npm 또는 bower 사용하여 Holmes를 설치할 수 있습니다. npm 의 경우 다음과 같습니다. 

$ yarn add holmes.js # or via npm

그런 다음 웹팩, 롤업, 브라우저화 또는 다른 스크립트 태그의 모듈 로드를 통해 페이지에 추가할 수 있습니다.

원하는 대로 요소를 숨기는 .hidden 클래스에 대한 css 규칙이 있는지 확인해야 합니다. 한 가지 옵션은 다음과 같습니다. 

. hidden {
  display : none;
}

하지만 이것은 당신이 원하는 어떤 css 라도 될 수 있습니다.

용법

데모

언제 사용해야 하나요?

다음과 같은 경우 홈즈를 사용해야 합니다.

  • 아이템 수량이 제한되어 있어요
  • 오타 허용은 필요하지 않습니다
  • 아주 작은 라이브러리만 추가하고 싶을 때
  • 모든 항목이 이미 페이지에 표시되어 있습니다.

좀 더 복잡한 기대치가 있는 경우 Algolia와 같은 서비스를 사용하는 것이 좋습니다.

공정한 공개: 저는 현재 Algolia에서 일하고 있습니다. 재미있을 것 같나요? 우리와 함께하세요!

간단한 예 

 holmes ( {
  input : '.search input' , // default: input[type=search]
  find : '.results div' // querySelectorAll that matches each of the results individually
} )

옵션

전체 문서

input

기본값 : input[type=search]

입력에 대한 querySelector

예 : input , .search input

필요한 것을 find

검색할 요소에 대한 querySelectorAll

예 : blockquote p , .result , .results div

class

class.hidden

기본값 : hidden

.find 에 검색어가 포함되어 있지 않을 때 추가할 클래스입니다.

예 : hidden , dn , none

class.visible

기본값 : false

검색어가 포함된 경우 표시되는 항목에 추가할 클래스입니다.

예 : visible , vis , nohidden

placeholder

기본값 : false

결과가 없을 때 표시할 HTML입니다.

예 : <p> No results </p> , Didn't find anything.

dynamic

기본값 : false

Holmes가 모든 입력에서 .find 값을 쿼리하도록 하려면 이 옵션을 활성화합니다.

예 : true , false

instant ️ 더 이상 사용되지 않음

기본값 : false

이 옵션은 더 이상 사용되지 않습니다. 비동기 환경에서 Holmes를 사용하려면 다음을 사용하여 초기화하세요. 

 holmes ( options ) . start ( ) ;
// or
const h = new holmes ( options ) ;
h . start ( ) ;

이렇게 하면 instant: true 에서 했던 것처럼 즉시 시작됩니다. 불편을 끼쳐드려 죄송합니다.

기본적으로 Holmes는 검색을 시작하기 위해 DOMContentLoaded 이벤트를 기다립니다. 예를 들어 AJAX 로 요소를 로드하는 경우 이 이벤트는 너무 일찍 발생합니다. 이 경우 instant 활성화하고 콘텐츠가 준비되면 Holmes를 시작할 수 있습니다.

예 : true , false

minCharacters

기본값 : 0

홈즈가 필터링을 시작하려면 최소한의 문자를 입력해야 합니다.

예 : 2 , 5

mark

기본값 : false

.find 내의 <mark> 태그에 결과를 표시하려면 이 기능을 활성화해야 합니다. 이 match 표시되는 색상을 변경하려면 mark 배경색 스타일을 지정해야 합니다.

❗ 이렇게 하면 중첩된 콘텐츠의 이벤트 리스너가 중단됩니다.

❗ 일치 항목 뒤의 문자가 리터럴 > 인 경우에는 작동하지 않습니다.

꼭 이 문자를 사용해야 한다면 > 를 모두 &gt; 로 바꿀 수 있습니다.

예 : true , false

hiddenAttr

기본값 : true

숨겨진 요소에 hidden="true" 추가합니다. 사용법을 설명하는 흥미로운 링크입니다.

shouldShow

기본 일치 판단은 입력 값의 부분 일치입니다. 

 function ( htmlText , search ) {
  return htmlText . indexOf ( search ) !== - 1 ;
}

요소의 텍스트를 첫 번째 인수로 사용하고 현재 입력 텍스트를 두 번째 인수로 사용하여 호출할 맞춤 일치 함수입니다. 요소를 표시하려면 true를 반환하고, 숨겨야 하는 경우에는 false를 반환해야 합니다. 

 var customMatching = function ( htmlText , search ) {
  return search . split ( / s+ / ) . every ( function ( v , i ) {
    if ( htmlText . indexOf ( v ) === - 1 ) {
      return false ;
    }
    return true ;
  } ) ;
}
holmes ( {
  shouldShow : customMatching
} )

onHidden

항목이 숨겨져 있을 때의 콜백입니다. 

 function ( el ) {
  console . log ( 'hide' , el ) ;
}

onVisible

항목이 다시 표시될 때의 콜백입니다. 

 function ( el ) {
  console . log ( 'show' , el ) ;
}

onEmpty

항목을 찾을 수 없을 때의 콜백입니다. 

 function ( placeholder ) {
  console . log ( 'nothing found' , placeholder ) ;
}

onFound

비어 있는 항목이 발견된 경우에 대한 콜백입니다. 

 function ( placeholder ) {
  console . log ( 'something found' , placeholder ) ;
}

onInput

모든 입력에 대한 콜백. 

 function ( input ) {
  console . log ( 'current input' , input ) ;
}

메소드 및 멤버

모든 메소드에 대해 다음과 같이 Holmes의 새 인스턴스를 초기화해야 합니다. 

 var h = new holmes ( options ) ;

그런 다음 다음 방법을 사용할 수 있습니다.

.clear()

다음을 사용하여 프로그래밍 방식으로 홈즈 입력을 지울 수 있습니다. 

 h . clear ( ) ;

.count()

언제든지 어떤 요소가 표시되고, 숨겨지고, 전체적으로 표시되는지에 대한 정보를 받을 수 있습니다. 

 h . count ( ) ; // {all: 41, hidden: 34, visible: 7}

.start()

지정된 옵션에 대해 짝수 리스너를 시작합니다. Holmes는 초기화 시 항상 .start() 실행합니다. 

 h . start ( ) ;

.stop()

현재 실행 중인 이벤트 리스너를 중지합니다. 이것이 완료되면 Promise를 해결합니다. 

 h . stop ( ) ;
h . start ( ) ; // could accidentally start too soon

h . stop ( ) . then ( h . start ) ; // might take a small time

.hidden

함수 호출 없이 개수를 제공하는 .hidden 멤버도 있습니다. 

 console . log ( h . hidden ) ; // 34

.elements

홈즈가 고려하는 모든 요소의 NodeList 입니다. 요소 수에 대한 .elementsLength 와 요소 배열에 대한 .elementsArray 도 있습니다.

.input

홈즈가 조사하는 입력입니다. 마지막 검색 문자열인 .searchString 도 있습니다.

.placeholder

현재 자리 표시자(DOM 노드)입니다.

.running

이 인스턴스가 실행 중인지 여부입니다.

.options

이 홈즈 인스턴스에 대해 선택된 옵션을 표시합니다. 초기화 후에 이와 같은 옵션을 설정할 수도 있습니다. 

 console . log ( h . options ) ; // specified options

참고: 실행 후 옵션을 설정하려면 h.stop().then(h.start) 이 필요할 수 있습니다.

유리 진열장

무엇 WHO 영상
Bullg.it @haroenv
가족.scss @lukyvj
wikeo.be @bistory
lunchbreakapp.be @AndreasBackx

사람들이 내 프로젝트를 어떻게 사용하는지 알고 싶습니다. 추천을 받고 싶다면 알려주세요!

질문?

IE11까지 호환됩니다. 이전 브라우저를 지원하려면 classList , addEventListener 및 input 이벤트(예: remy/polyfills)를 폴리필해야 합니다. 아직 직접 시도해 보지 않았으므로 이전 브라우저를 지원한다면 무엇을 사용했는지 알려주세요!

IE11의 경우 Object.assign 및 String.includes 폴리필해야 합니다. #90에 설명된 대로 그렇게 할 수 있습니다.

트위터 @haroenv로 알려주시거나 문제가 있으면 알려주세요.

기여

기여는 언제나 환영합니다! 다음은 몇 가지 느슨한 지침입니다.

  • feature branches 사용
  • 속도를 늦추지 마세요
  • 해당 기능을 원하는 이유를 설명하세요.
  • npm run doc 사용하여 문서를 다시 만듭니다.

UMD 빌드는 롤업( npm run build )을 통해 수행됩니다.

하지만 저는 물지 않습니다. 질문이나 불안감이 있으면 예를 들어 Gitter에 대해 저에게 연락하세요.

특허

아파치 2.0

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체