Unduhan vue2 autocomplete - pengunduhan kode sumber vue2 autocomplete

Vue 2 Pelengkapan Otomatis

Komponen Pelengkapan Otomatis Untuk Vue 2. Ini didasarkan pada vue-autocomplete. DEMO LANGSUNG DI SINI!

vue Autocomplete component

Memasang

Anda dapat mengimpor vue2-autocomplete.vue ke file komponen vue Anda seperti ini dan memprosesnya dengan praprosesor Anda.

Anda dapat menginstalnya melalui NPM

npm install vue2-autocomplete-js

Atau letakkan saja setelah 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 >

Impor Gaya

Jangan lupa import vue 2 css. Anda dapat menautkannya melalui html

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

Atau Anda dapat mengimpornya menggunakan commonJS

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

Gayanya sangat dapat disesuaikan. Anda dapat meletakkan CSS apa pun di atasnya. Dan Anda dapat menambahkan kelas khusus melalui propnya.

Modul Impor

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

Penggunaan

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

Alat Peraga yang Tersedia

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

Alat peraga

url* (String)

URL harus aktif (bukan dari file). komponen akan mengambil JSON dari URL ini dan meneruskan satu kueri params (default : q ). menyukai:

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

Tidak ada tindakan filter dan batasan di dalam komponen. Jadi, lakukan itu dalam logika API Anda.

param (String: "q")

nama parameter pencarian yang akan ditanyakan dalam panggilan Ajax. standarnya adalah q

menit (Angka: 0)

Input minimum karakter yang diketik sebelum melakukan permintaan pencarian. standarnya adalah 0

jangkar* (Tali)

Ini adalah jalur properti objek yang digunakan untuk Anchor dalam daftar saran. Contoh anchor="name" akan mendapatkan properti nama objek JSON Anda. Seperti (“Bambang”, “Sukijan”, “Bejo”) pada demo diatas. Atau Anda dapat mencapai nilai terdalam dari objek Anda. Seperti anchor="geometry.location.lat"

label (String)

Sama seperti jangkar tetapi digunakan untuk subjudul atau deskripsi daftar

pilihan (Array)

Secara manual meneruskan Array opsi daftar ke pelengkapan otomatis.

filterByAnchor (Boolean: benar)

Saat Anda menggunakan alat peraga opsi, Anda dapat memiliki pelengkapan otomatis untuk memfilter data Anda. Atau Anda bisa langsung menampilkan data Anda tanpa filter apa pun dari pelengkapan otomatis. Opsi akan disaring berdasarkan jangkar dan sesuai dengan masukan pengguna.

encodeParams (Boolean: benar)

Pelengkapan otomatis akan encodeURIComponent semua parameter Anda sebelum ajax mengirim, Ketika props ini disetel ke true . Standarnya true #35

menghilangkan pantulan (Nomor)

Tunda waktu sebelum melakukan ajax untuk datanya

diperlukan (Boolean)

Atribut yang diperlukan untuk masukan

pengganti (String)

Placeholder untuk masukan

nama kelas (String)

Nama kelas khusus untuk komponen pelengkapan otomatis

kelas (Objek)

Kelas khusus khusus untuk setiap bagian. tersedia: pembungkus, masukan, daftar, dan item

identitas (String)

Nama id khusus untuk komponen pelengkapan otomatis

menghilangkan pantulan (angka)

Jumlah milidetik pengguna harus berhenti mengetik sebelum permintaan dikirim. Defaultnya adalah 0, artinya semua permintaan segera dikirim.

proses (Fungsi)

Berfungsi untuk memproses hasil API. Harus mengembalikan array entri atau objek yang propertinya dapat disebutkan.

templat (Fungsi)

Berfungsi untuk memproses setiap hasil. Mengambil tipe elemen balasan API dan harus mengembalikan data HTML.

Acara Panggilan Balik

Anda dapat membuat acara panggilan balik melalui alat peraga.

pada Input (Fungsi)

Pada acara Input dalam pelengkapan otomatis

di Pertunjukan (Fungsi)

Aktif Tampilkan acara dalam daftar pelengkapan otomatis

onBlur (Fungsi)

Saat pelengkapan otomatis diburamkan

diSembunyikan (Fungsi)

Ketika daftar pelengkapan otomatis disembunyikan

onFocus (Fungsi)

Saat input pelengkapan otomatis dalam mode fokus

diPilih (Fungsi)

Ketika pengguna telah memilih satu item dalam daftar

diBeforeAjax (Fungsi)

Sebelum ajax kirim

diAjaxProgress (Fungsi)

Saat ajax mengambil data

onAjaxLoaded (Fungsi)

Ketika proses ajax dimuat sepenuhnya

onShouldGetData (Fungsi)

Memproses seluruh proses ajax secara manual. Jika itu adalah Janji, itu harus menyelesaikan opsi untuk daftar pelengkapan otomatis. Jika ini bukan Janji, Anda dapat meneruskan opsi secara manual ke alat pelengkapan otomatis

 < 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 ( ) ;
    } ,
  }
}

proses (Fungsi)

Proses hasilnya sebelum mengambil array hasil. Anda dapat membentuk data Anda di sini sebelum diteruskan ke pelengkapan otomatis

onShouldRenderChild (Fungsi)

Ingin menggunakan templat khusus untuk daftarnya? Sekarang, kamu bisa melakukannya!

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

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

Metode

Anda dapat melakukan beberapa metode dengan mengakses komponen melalui javascript.

 this . $refs . autocomplete . someMethod ( )

setNilai (String)

Untuk mengatur nilai input pelengkapan otomatis

Terima kasih telah menjadikan ini bermanfaat~

Mari kita bicara tentang beberapa proyek dengan saya

Hubungi Saya Di:

Surel: [email protected]
ID Skype: bosnaufal254
twitter: @BosNaufal

Lisensi

Memperluas