vue2 autocomplete

Vue 2 เติมข้อความอัตโนมัติ

คอมโพเนนต์เติมข้อความอัตโนมัติสำหรับ Vue 2 ขึ้นอยู่กับ vue-autocomplete สาธิตสดที่นี่!

ติดตั้ง

คุณสามารถนำเข้า 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 จะต้องใช้งานอยู่ (ไม่ใช่จากไฟล์) ส่วนประกอบจะดึง JSON จาก URL นี้และส่งผ่านหนึ่งพารามิเตอร์ (ค่าเริ่มต้น : q ) แบบสอบถาม ชอบ:

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

ไม่มีตัวกรองและจำกัดการดำเนินการภายในส่วนประกอบ ดังนั้นให้ทำในตรรกะ API ของคุณ

พารามิเตอร์ (สตริง: "q")

ชื่อของพารามิเตอร์การค้นหาที่จะค้นหาในการเรียก Ajax ค่าเริ่มต้นคือ q

นาที (หมายเลข: 0)

ตัวอักษรที่ป้อนขั้นต่ำก่อนดำเนินการค้นหา ค่าเริ่มต้นคือ 0

สมอ* (สตริง)

เป็นเส้นทางคุณสมบัติของวัตถุที่ใช้สำหรับ Anchor ในรายการข้อเสนอแนะ ตัวอย่าง anchor="name" จะได้รับคุณสมบัติ name ของวัตถุ JSON ของคุณ ชอบ ("Bambang", "Sukijan", "Bejo") ในการสาธิตด้านบน หรือคุณสามารถเข้าถึงมูลค่าที่ลึกของวัตถุของคุณได้ เช่นเดียวกับ anchor="geometry.location.lat"

ป้าย (สตริง)

เหมือนกับจุดยึด แต่ใช้สำหรับคำบรรยายหรือคำอธิบายของรายการ

ตัวเลือก (อาร์เรย์)

ส่งผ่านตัวเลือกอาร์เรย์ของรายการด้วยตนเองไปยังการเติมข้อความอัตโนมัติ

filterByAnchor (บูลีน: จริง)

เมื่อคุณใช้อุปกรณ์ประกอบฉากตัวเลือก คุณสามารถเติมข้อความอัตโนมัติเพื่อกรองข้อมูลของคุณได้ หรือคุณสามารถแสดงข้อมูลของคุณโดยตรงโดยไม่ต้องกรองใดๆ จากการเติมข้อความอัตโนมัติ ตัวเลือกจะถูกกรองโดยจุดยึดและตามอินพุตของผู้ใช้

encodeParams (บูลีน: จริง)

การเติมข้อความอัตโนมัติจะ encodeURIComponent พารามิเตอร์ทั้งหมดของคุณก่อนที่จะส่ง ajax เมื่ออุปกรณ์ประกอบฉากนี้ตั้งค่าเป็น true ค่าเริ่มต้นเป็น true #35

เดเด้ง (จำนวน)

หน่วงเวลาก่อนที่จะทำ ajax สำหรับข้อมูล

จำเป็น (บูลีน)

แอตทริบิวต์ที่จำเป็นสำหรับการป้อนข้อมูล

ตัวยึด (สตริง)

ตัวยึดตำแหน่งสำหรับการป้อนข้อมูล

ชื่อคลาส (สตริง)

ชื่อคลาสที่กำหนดเองสำหรับคอมโพเนนต์เติมข้อความอัตโนมัติ

คลาส (วัตถุ)

คลาสแบบกำหนดเองเฉพาะสำหรับแต่ละส่วน พร้อมใช้งาน: wrapper, อินพุต, รายการ และรายการ

ไอดี (สตริง)

ชื่อรหัสที่กำหนดเองสำหรับองค์ประกอบเติมข้อความอัตโนมัติ

เดเด้ง (จำนวน)

จำนวนมิลลิวินาทีที่ผู้ใช้ควรหยุดพิมพ์ก่อนที่จะส่งคำขอ ค่าเริ่มต้นคือ 0 ซึ่งหมายความว่าคำขอทั้งหมดจะถูกส่งทันที

กระบวนการ (ฟังก์ชัน)

ฟังก์ชั่นการประมวลผลผลลัพธ์ API ด้วย ควรส่งคืนอาร์เรย์ของรายการหรือวัตถุที่มีคุณสมบัติที่สามารถระบุได้

แม่แบบ (ฟังก์ชัน)

ฟังก์ชั่นการประมวลผลแต่ละผลลัพธ์ด้วย รับประเภทขององค์ประกอบตอบกลับ API และควรส่งคืนข้อมูล HTML

เหตุการณ์การโทรกลับ

คุณสามารถโทรกลับได้ผ่านอุปกรณ์ประกอบฉาก

onInput (ฟังก์ชัน)

ในเหตุการณ์การป้อนข้อมูลในการเติมข้อความอัตโนมัติ

onShow (ฟังก์ชัน)

On Show event ในรายการเติมข้อความอัตโนมัติ

onBlur (ฟังก์ชัน)

เมื่อการเติมข้อความอัตโนมัติถูกเบลอ

onHide (ฟังก์ชัน)

เมื่อรายการเติมข้อความอัตโนมัติถูกซ่อนไว้

onFocus (ฟังก์ชัน)

เมื่อป้อนข้อมูลอัตโนมัติในโหมดโฟกัส

onSelect (ฟังก์ชัน)

เมื่อผู้ใช้เลือกหนึ่งรายการในรายการ

onBeforeAjax (ฟังก์ชัน)

ก่อนอาแจ็กซ์จะส่ง

onAjaxProgress (ฟังก์ชัน)

ขณะที่ ajax กำลังดึงข้อมูล

onAjaxLoaded (ฟังก์ชัน)

เมื่อกระบวนการ ajax ถูกโหลดอย่างสมบูรณ์

onShouldGetData (ฟังก์ชัน)

ประมวลผลกระบวนการ ajax ทั้งหมดด้วยตนเอง หากเป็นสัญญา ควรแก้ไขตัวเลือกสำหรับรายการเติมข้อความอัตโนมัติ หากไม่ใช่ 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]
• รหัส Skype: bosnaufal254
• ทวิตเตอร์: @BosNaufal

ใบอนุญาต

MIT Copyright (c) 2016 - Naufal Rabbani ตลอดไป