vue2 autocomplete 다운로드 - vue2 autocomplete 소스 코드 다운로드

Vue 2 자동 완성

Vue 2의 자동 완성 구성 요소. vue-autocomplete를 기반으로 합니다. 여기 라이브 데모가 있습니다!

vue Autocomplete component

설치하다

이와 같이 vue2-autocomplete.vue를 vue 구성 요소 파일로 가져와 전처리기로 처리할 수 있습니다.

NPM을 통해 설치할 수 있습니다.

npm install vue2-autocomplete-js

아니면 그냥 Vue JS 뒤에 넣으세요~

 < script src =" https://vuejs.org/js/vue.min.js " > </ script >
< script src =" ./dist/vue2-autocomplete.js " > </ script >
< script >
  // Don't Forget to register it
  new Vue ( {
    components : {
      autocomplete : Vue2Autocomplete
    }
  } ) ;
</ script >

가져오기 스타일

vue 2 CSS를 가져오는 것을 잊지 마세요. HTML을 통해 링크할 수 있습니다.

 < link rel =" stylesheet " href =" vue2-autocomplete-js/dist/style/vue2-autocomplete.css " >

또는 commonJS를 사용하여 가져올 수 있습니다.

 require ( 'vue2-autocomplete-js/dist/style/vue2-autocomplete.css' )

그 스타일은 매우 사용자 정의가 가능합니다. 그 위에 CSS를 넣을 수 있습니다. 그리고 소품을 통해 사용자 정의 클래스를 추가할 수 있습니다.

가져오기 모듈

 import Autocomplete from 'vue2-autocomplete-js'
// Or
var Autocomplete = require ( 'vue2-autocomplete-js' ) ;

용법

 < template >

  < autocomplete
    url =" http://localhost/proyek/goodmovie/api/api/v1/search "
    anchor =" title "
    label =" writer "
    :on-select =" getData " >
  </ autocomplete >

</ template >


< script >

  import Autocomplete from 'vue2-autocomplete-js' ;

  export default {

    components : { Autocomplete } ,

    methods : {
      getData ( obj ) {
        console . log ( obj ) ;
      }
    }
  } ;

</ script >

사용 가능한 소품

 < template >

  < autocomplete
    url =" http://localhost/proyek/goodmovie/api/api/v1/search "
    anchor =" title "
    label =" writer "
    :onSelect =" getData "
    :customParams =" { token: 'dev' } "
    :customHeaders =" { Authorization: 'bearer abc123' } "


    :required =" true "
    id =" custom id "
    className =" custom class name "
    :classes =" { wrapper: 'form-wrapper', input: 'form-control', list: 'data-list', item: 'data-list-item' } "
    placeholder =" placeholder "
    :initValue =" initial value "


    :options =" [] "
    :min =" 3 "
    :debounce =" 2000 "
    :filterByAnchor =" true "
    :encodeParams =" true "

    :onShouldGetData =" getData "
    :onInput =" callbackEvent "
    :onShow =" callbackEvent "
    :onBlur =" callbackEvent "
    :onHide =" callbackEvent "
    :onFocus =" callbackEvent "
    :onSelect =" callbackEvent "
    :onBeforeAjax =" callbackEvent "
    :onAjaxProgress =" callbackEvent "
    :onAjaxLoaded =" callbackEvent "
    :onShouldRenderChild =" renderChild "
  >
  </ autocomplete >

</ template >

소품

URL*(문자열)

URL은 활성 상태여야 합니다(파일에서가 아님). 구성 요소는 이 URL에서 JSON을 가져오고 하나의 params(기본값: q ) 쿼리를 전달합니다. 좋다:

 http://some-url.com/API/list?q=

구성 요소 내부에는 필터 및 제한 작업이 없습니다. 따라서 API 로직에서 수행하십시오.

param(문자열: "q")

Ajax 호출에서 쿼리할 검색 매개변수의 이름입니다. 기본값은 q 입니다

분(수: 0)

검색 쿼리를 수행하기 전 최소 입력 유형 문자입니다. 기본값은 0 입니다

앵커*(문자열)

제안 목록의 Anchor에 사용된 개체 속성 경로입니다. 예를 들어 anchor="name" JSON 개체의 이름 속성을 가져옵니다. 위 데모의 ("Bambang", "Sukijan", "Bejo")와 같습니다. 아니면 대상의 깊은 가치에 도달할 수도 있습니다. anchor="geometry.location.lat" 과 같습니다.

라벨(문자열)

앵커와 동일하지만 목록의 부제나 설명에 사용됩니다.

옵션(어레이)

목록 옵션 배열을 자동 완성에 수동으로 전달합니다.

filterByAnchor(부울: true)

옵션 소품을 사용하는 경우 자동 완성 기능을 사용하여 데이터를 필터링할 수 있습니다. 또는 자동 완성의 필터 없이 데이터를 직접 표시할 수도 있습니다. 옵션은 앵커별로 필터링되며 사용자 입력에 따라 필터링됩니다.

encodeParams(부울: true)

이 props가 true 로 설정되면 Autocomplete는 ajax 전송 전에 모든 매개변수를 encodeURIComponent 합니다. 기본값은 true #35입니다.

디바운스(숫자)

데이터에 대한 Ajax를 수행하기 전 지연 시간

필수(부울)

입력에 필요한 속성

자리 표시자(문자열)

입력을 위한 자리 표시자

클래스명(문자열)

자동 완성 구성 요소의 사용자 정의 클래스 이름

클래스(객체)

각 부분에 대한 특정 사용자 정의 클래스입니다. 사용 가능: 래퍼, 입력, 목록 및 항목

아이디(문자열)

자동완성 구성요소의 맞춤 ID 이름

디바운스(숫자)

요청이 전송되기 전에 사용자가 입력을 중지해야 하는 시간(밀리초)입니다. 기본값은 0입니다. 이는 모든 요청이 즉시 전송된다는 의미입니다.

프로세스(기능)

API 결과를 처리하는 함수입니다. 항목 배열이나 속성을 열거할 수 있는 개체를 반환해야 합니다.

템플릿(기능)

각 결과를 처리하는 기능입니다. API 응답 요소의 유형을 취하고 HTML 데이터를 반환해야 합니다.

콜백 이벤트

props를 통해 콜백 이벤트를 만들 수 있습니다.

onInput(함수)

자동 완성의 입력 이벤트

onShow(함수)

자동 완성 목록에 이벤트 표시 중

onBlur(함수)

자동 완성이 흐리게 표시되는 경우

onHide(함수)

자동완성 목록이 숨겨져 있는 경우

onFocus(함수)

포커스 모드에서 자동 완성 입력 시

onSelect(함수)

사용자가 목록에서 하나의 항목을 선택한 경우

onBeforeAjax(함수)

아약스가 보내기 전에

onAjaxProgress(함수)

Ajax가 데이터를 가져오는 동안

onAjaxLoaded(함수)

Ajax 프로세스가 완전히 로드된 경우

onShouldGetData(함수)

전체 Ajax 프로세스를 수동으로 처리합니다. Promise인 경우 자동 완성 목록에 대한 옵션을 해결해야 합니다. Promise가 아닌 경우 자동 완성 소품에 옵션을 수동으로 전달할 수 있습니다.

 < autocomplete
  anchor =" formatted_address "
  label =" formatted_address "
  :onShouldGetData =" getData "
>
</ autocomplete >

methods: {
  promise ( value ) {
    return new Promise ( ( resolve , reject ) => {
      let ajax = new XMLHttpRequest ( ) ;
      ajax . open ( 'GET' , `https://maps.googleapis.com/maps/api/geocode/json?address= ${ value } ` , true ) ;
      // On Done
      ajax . addEventListener ( 'loadend' , ( e ) => {
        const { responseText } = e . target
        let response = JSON . parse ( responseText ) ;
        // The options to pass in the autocomplete
        resolve ( response . results )
      } ) ;
      ajax . send ( ) ;
    } )
  } ,

  nonPromise ( ) {
    getData ( value ) {
      let ajax = new XMLHttpRequest ( ) ;
      ajax . open ( 'GET' , `https://maps.googleapis.com/maps/api/geocode/json?address= ${ value } ` , true ) ;
      // On Done
      ajax . addEventListener ( 'loadend' , ( e ) => {
        const { responseText } = e . target
        let response = JSON . parse ( responseText ) ;
        // The options to pass in the autocomplete props
        this . options = response . results ;
      } ) ;
      ajax . send ( ) ;
    } ,
  }
}

프로세스(기능)

결과 배열을 검색하기 전에 결과를 처리합니다. 자동 완성 기능으로 전달되기 전에 여기에서 데이터를 구성할 수 있습니다.

onShouldRenderChild(함수)

목록에 사용자 정의 템플릿을 사용하고 싶으십니까? 이제 할 수 있습니다!

 < autocomplete
  anchor =" formatted_address "
  label =" formatted_address "
  :onShouldRenderChild =" renderChild "
>
</ autocomplete >

methods: {
  renderChild ( data ) {
    return `
      <img src=" ${ data . src } " />
      <span> ${ data . something } </span>
    `
  } ,
}

행동 양식

자바스크립트를 통해 구성요소에 액세스하여 몇 가지 방법을 수행할 수 있습니다.

 this . $refs . autocomplete . someMethod ( )

setValue(문자열)

자동 완성 입력 값을 설정하려면

유용하게 써주셔서 감사합니다~

나랑 몇 가지 프로젝트에 대해 이야기하자

저에게 연락주세요:

이메일: [email protected]
스카이프 ID: bosnaufal254
트위터: @BosNaufal

특허

확장하다