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

jquery autocompleter

기타 소스코드

1.0.0

다운로드

jQuery 자동완성 플러그인

데모

여기: Crayola 색상의 예입니다.

용법

설치

npm:

npm install --save jquery-autocompleter

방사:

yarn add jquery-autocompleter

프로젝트에 플러그인 추가

jQuery를 포함:

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

플러그인 코드를 포함합니다:

 <!-- Styles -->
< link rel =" stylesheet " href =" css/jquery.autocompleter.css " />

<!-- Scripts -->
< script src =" js/jquery.autocompleter.min.js " > </ script >

플러그인을 호출합니다:

 $ ( "input" ) . autocompleter ( {
  /* options */
} ) ;

예

원격 URL

 $ ( function ( ) {
  $ ( "input" ) . autocompleter ( { source : "path/to/get_data_request" } ) ;
} ) ;

솔직한

 var data = [
  { value : 1 , label : "one" } ,
  { value : 2 , label : "two" } ,
  { value : 3 , label : "three" } ,
] ;

$ ( function ( ) {
  $ ( "input" ) . autocompleter ( { source : data } ) ;
} ) ;

옵션

자동 완성기에는 다음과 같은 옵션이 있습니다.

이름	유형	설명	기본
원천	str, obj	서버 또는 로컬 개체에 대한 URL	null
로컬로	부울	원격 응답을 로컬 소스로 구문 분석	거짓
비어 있는	부울	값이 비어 있으면 실행됩니다.	진실
한계	정수	표시할 결과 수	10
최소 길이	정수	자동 완성기의 최소 길이	0
지연	정수	요청을 연기하는 데 몇 밀리초	0
맞춤 클래스	정렬	자동 완성 요소에 대한 사용자 정의 클래스가 있는 배열	[]
은닉처	부울	요청 반복을 피하기 위해 xhr 데이터를 localStorage에 저장	진실
캐시 만료	정수	localStorage 데이터 수명(초)(캐시 만료를 비활성화하려면 0)	86400
초점열기	부울	입력에 포커스가 있을 때 자동 완성기 실행	진실
입력선택	부울	Enter 키를 사용하여 선택할 수 있습니다.	진실
힌트	부울	첫 번째로 일치하는 레이블이 있는 입력에 힌트를 추가하고 올바른 스타일을 설치해야 합니다.	거짓
우선 선택	부울	`true` 로 설정하면 자동 완성 목록의 첫 번째 요소가 자동으로 선택되고,changeWhenSelect가 켜져 있으면 무시됩니다.	거짓
변경시기선택	부울	자동 완성 목록에서 화살표 키 탐색을 사용하여 입력 값을 변경할 수 있습니다.	진실
하이라이트 일치	부울	이 옵션은 자동 완성 결과에서 일치하는 항목에 대한 `<strong>` 태그 줄 바꿈을 정의합니다.	거짓
무시된 키코드	정렬	무시할 수 있는 키코드가 있는 배열(기본적으로 `9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145`	[]
맞춤 라벨	str	라벨로 사용될 객체의 속성 이름	거짓
맞춤값	str	값으로 사용될 객체의 속성 이름	거짓
onBeforeSend	기능	이 함수는 Ajax 요청 전에 트리거됩니다.	$.noop
onBeforeShow	기능	이 함수는 목록을 표시할 준비가 되면 트리거됩니다.	$.noop
비어 있음	기능	데이터 목록이 비어 있으면 이 기능을 트리거합니다.	$.noop
항목에	기능	이 기능은 각 항목이 표시될 준비가 될 때 트리거됩니다.	$.noop
onList열기	기능	이 기능은 목록이 표시될 때 트리거됩니다.	$.noop
onList닫기	기능	이 기능은 목록이 숨겨져 있을 때 실행됩니다.	$.noop
onBeforeLaunch	기능	새 요청 전에 이벤트가 트리거되었습니다(로컬 캐시 포함).	$.noop
주형	str	목록 항목에 대한 사용자 정의 템플릿입니다. 예를 들어 `<span>{{ label }} is {{ customPropertyFromSource }}</span>` . 템플릿은 `.autocompleter-item` 에 추가됩니다.	거짓
오프셋	str	소스 응답 오프셋(예: `"response.items.posts"` ) @deprecated 대신 `format` 사용하세요	거짓
체재	기능	소스 데이터를 반환하도록 응답 페이로드 형식 지정	null
결합하다	기능	Ajax 데이터를 확장하는 객체를 반환합니다. 몇 가지 추가 서버 옵션을 전달하려는 경우 유용합니다.	$.noop
콜백	기능	값 콜백 함수를 선택합니다. 인수: `value` , `index` , `object`	$.noop

행동 양식

플러그인 정의 후 옵션 변경

 $ ( "#input" ) . autocompleter ( "option" , data ) ;

예를 들어:

 $ ( "#input" ) . autocompleter ( "option" , {
  limit : 5 ,
  template :
    '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}' ,
} ) ;

목록 열기

 $ ( "#input" ) . autocompleter ( "open" ) ;

목록 닫기

 $ ( "#input" ) . autocompleter ( "close" ) ;

플러그인 삭제

 $ ( "#input" ) . autocompleter ( "destroy" ) ;

모든 캐시 지우기

 $ . autocompleter ( "clearCache" ) ;

기본값 설정

 $ . autocompleter ( "defaults" , {
  customClass : "myClassForAutocompleter" ,
} ) ;

또 하나의 예

캐싱, 일치 강조 표시 및 5개 결과 제한 기능을 갖춘 이름 입력용 자동 완성기입니다. 원격 응답은 성별에 따라 다릅니다.

양식 마크업

 < fieldset >
  < label > Male </ label >
  < input type =" radio " name =" gender " value =" male " checked =" checked " />

  < label > Female </ label >
  < input type =" radio " name =" gender " value =" female " />

  < label > Other </ label >
  < input type =" radio " name =" gender " value =" other " />

  < label > First Name </ label >
  < input type =" text " name =" firstname " id =" firstname " />
</ fieldset >

암호

 $ ( function ( ) {
  $ ( "#firstname" ) . autocompleter ( {
    source : "https://EXAMPLE_API_ENDPOINT.com/api/search/name" ,
    limit : 5 ,
    cache : true ,
    combine : function ( params ) {
      var gender = $ ( "input:radio[name=gender]:checked" ) . val ( ) ;

      // passing params to match endpoint
      return {
        q : params . query ,
        count : params . limit ,
        gender : gender ,
      } ;
    } ,
    format : function ( data ) {
      // map response data to match autocompleter
      return data . entries . map ( function ( item ) {
        return {
          label : item . name ,
          value : item . slug ,
        } ;
      } ) ;
    } ,
    callback : function ( value , index , object ) {
      console . log (
        "Value " + value + " are selected (with index " + index + ")."
      ) ;
      console . log ( object ) ;
    } ,
  } ) ;
} ) ;

마크업

div (node) -> ul (list) -> li (item) .

 < div class =" autocompleter " id =" autocompleter-1 " >
  < ul class =" autocompleter-list " >
    < li class =" autocompleter-item " > First </ li >
    <!-- ... -->
    < li class =" autocompleter-item " > Last </ li >
  </ ul >
</ div >