หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

vue-simple-แนะนำ

องค์ประกอบเติมข้อความอัตโนมัติที่เรียบง่ายแต่เต็มไปด้วยฟีเจอร์สำหรับ Vue.js

ติดตั้ง 

npm install --save vue-simple-suggest

ดูคู่มือการติดตั้งสำหรับตัวเลือกเพิ่มเติม

สารบัญ

  • vue-simple-แนะนำ
    • ติดตั้ง
    • สารบัญ
    • มันคืออะไร
      • คุณสมบัติ
      • คุณสมบัติใหม่?
    • ตัวอย่าง:
      • ตัวอย่างง่ายๆ
      • ตัวอย่างอะซิงก์
    • การติดตั้ง
      • นพีเอ็ม
      • แกะกล่องออก
      • กำลังนำเข้า
        • โพลีฟิล
      • การใช้งาน
    • สร้างการตั้งค่า
    • การควบคุมเริ่มต้น
    • API ส่วนประกอบ
      • ทีแอลดีอาร์
      • โครงสร้างคลาส CSS
        • การเปลี่ยนผ่าน
      • คำจำกัดความของ API
        • อุปกรณ์ประกอบฉาก
          • โหมด
        • เหตุการณ์ที่ปล่อยออกมา
        • วิธีการอ้างอิง
        • อ้างอิงตัวจัดการเหตุการณ์
        • ข้อมูลอ้างอิง
      • สล็อต
        • อินพุตที่กำหนดเอง
        • การเข้าถึงข้อมูลอินพุตแบบกำหนดเอง
        • รายการคำแนะนำที่กำหนดเอง
        • ช่องรายการเบ็ดเตล็ดที่กำหนดเอง
    • ผู้ร่วมให้ข้อมูล

มันคืออะไร

นี่เป็นคำแนะนำ/ส่วนประกอบเติมข้อความอัตโนมัติที่เรียบง่ายแต่เต็มไปด้วยฟีเจอร์สำหรับ Vue.js

จริงๆ แล้ว มันมีฟีเจอร์มากมาย ถึงขนาดเป็นไปได้ที่จะใช้มันทำอะไรบ้าๆ แบบนั้นได้

  • เลียนแบบเมนูแบบเลื่อนลงและแบบเลื่อนลง
  • เปลี่ยนรายการข้อเสนอแนะให้เป็นตารางข้อเสนอแนะจริง
  • ทำงานกับอินพุตแบบกำหนดเองทุกประเภทที่ส่งผ่าน (เช่น type=button, radio และอื่นๆ)
  • ... และอีกหลายอย่าง

และมันเป็นโบนัสที่เบามาก

คุณสมบัติ

  • รองรับ v-model
  • คุณลักษณะการเข้าถึงอัตโนมัติ (WAI-ARIA เสร็จสมบูรณ์)
  • การสลับประเภท v-model (เลือก/อินพุต)
  • องค์ประกอบอินพุตที่กำหนดเองผ่านช่องเริ่มต้น
  • รายการที่กำหนดเองผ่านช่องที่กำหนดขอบเขตชื่อ
  • อุปกรณ์ประกอบฉากที่ถูกต้อง HTML5 ทั้งหมดสำหรับองค์ประกอบอินพุตเริ่มต้นมีให้ ( type , tabindex และอื่น ๆ...)
  • การควบคุมแป้นพิมพ์ที่ปรับแต่งได้
  • API ที่สมบูรณ์และเรียบง่าย
  • คลาส CSS เพื่อการปรับแต่งที่รวดเร็วและง่ายดาย
  • มีหลายรุ่นให้เลือก
  • การออกแบบส่วนประกอบที่ยืดหยุ่นและปรับแต่งได้
  • polyfills เสริมสำหรับ IE ที่นำเข้าได้จาก lib

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

คุณสมบัติใหม่?

หากคุณรู้สึกว่ามีบางสิ่งที่สำคัญหายไป (หรือพบข้อบกพร่อง) โปรดสร้างปัญหาขึ้นมาได้เลย -

ตัวอย่าง:

หากต้องการใช้ส่วนประกอบเพียงติดตั้งผ่าน NPM:

npm install --save vue-simple-suggest

จากนั้นในส่วนประกอบ/เพจ Vue.js ของคุณ ให้ทำดังต่อไปนี้...

ตัวอย่างง่ายๆ

หากคุณต้องการแนะนำสิ่งต่าง ๆ จากอาร์เรย์แบบคงที่: 

 <!-- Some component.vue -->
< template >
  < vue-simple-suggest
    v-model =" chosen "
    :list =" simpleSuggestionList "
    :filter-by-query =" true " >
<!-- Filter by input text to only show the matching results -->
  </ vue-simple-suggest >

  < br >

  < p > Chosen element: {{ chosen }} </ p >
</ template >

< script >
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Optional CSS

  export default {
    components : {
      VueSimpleSuggest
    } ,
    data ( ) {
      return {
        chosen : ''
      }
    } ,
    methods : {
      simpleSuggestionList ( ) {
        return [
          'Vue.js' ,
          'React.js' ,
          'Angular.js'
        ]
      }
    }
  }
</ script >

ตัวอย่างอะซิงก์

หากคุณกำลังจัดการกับข้อมูล async จากเซิร์ฟเวอร์ (ตัวอย่างการใช้ https://swapi.co/): 

 <!-- Some component.vue -->
< template >
  < vue-simple-suggest
    v-model =" chosen "
    display-attribute =" name "
    value-attribute =" url "
    :list =" getSuggestionList "
  > </ vue-simple-suggest >

  < br >

  < p > Chosen element: {{ chosen }} </ p >
</ template >

< script >
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Optional CSS

  export default {
    components : {
      VueSimpleSuggest
    } ,
    data ( ) {
      return {
        chosen : ''
      }
    } ,
    methods : {
      // Function returning a promise as a factory for suggestion lists.
      //
      // vue-simple-suggest calls it automatically when an update to the list is needed,
      // no need for watchers here!
      getSuggestionList ( ) {
        return fetch ( 'https://swapi.co/api/people' , { method : 'GET' } )
          . then ( response => response . json ( ) )
          . then ( json => json . results ) ; /*
          returns a promise with a list of star-wars characters
        */
      }
    }
  }
</ script >

สำหรับตัวอย่างขั้นสูง (โดยใช้การค้นหาวิกิพีเดีย) โปรดดูแหล่งที่มาตัวอย่างของเรา

การติดตั้ง

นพีเอ็ม 

npm install --save vue-simple-suggest
# or
yarn add vue-simple-suggest

แกะกล่องออก

หากรวมผ่านวิธีนี้ ส่วนประกอบจะติดตั้งเองโดยอัตโนมัติ 

 <!-- UMD Component, async/await polyfills through promises -->
< script type =" text/javascript " src =" https://unpkg.com/vue-simple-suggest " > </ script >
< script type =" text/javascript " src =" https://unpkg.com/[email protected] " > </ script >
                                                              <!-- Specific version -->

<!-- CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/vue-simple-suggest/dist/styles.css " >

<!-- If you need polyfills, use IIFE verision below -->
<!-- IIFE build includes ALL polyfills: Object.assign, Promises, Generators, Async/Await! -->
< script type =" text/javascript " src =" https://unpkg.com/vue-simple-suggest/dist/iife.js " > </ script >

กำลังนำเข้า 

 /// ESNext (original code, no pollyfills, single-file .vue component, css included)
import VueSimpleSuggest from 'vue-simple-suggest/lib'
///

/// ES6 (async polyfills)
import VueSimpleSuggest from 'vue-simple-suggest'
// or, if you have problems importing:
import VueSimpleSuggest from 'vue-simple-suggest/dist/es6'
///

/// ES7 and above (no polyfills)
import VueSimpleSuggest from 'vue-simple-suggest/dist/es7'
///

/// CommonJS (async, arrow-functions and promises are polyfilled)
const VueSimpleSuggest = require ( 'vue-simple-suggest' )
// or, if you have problems importing:
const VueSimpleSuggest = require ( 'vue-simple-suggest/dist/cjs' )
///

// Optional - import css separately with css loaders:
import 'vue-simple-suggest/dist/styles.css'

โพลีฟิล

ใหม่ใน v1.8.3

vue-simple-suggest มาพร้อมกับ polyfills ทางเลือกขั้นต่ำสำหรับ IE11+ - Object.assign , Element.prototype.closest และ Element.prototype.matches คุณสามารถนำเข้าได้ดังนี้: 

 import 'vue-simple-suggest/lib/polyfills' ;
// or
require ( 'vue-simple-suggest/lib/polyfills' ) ;

การใช้งาน

ทั่วโลก: 

 // You don't need to do it, if including via <script> (umd, iife)
Vue . component ( 'vue-simple-suggest' , VueSimpleSuggest )

ในคอมโพเนนต์ .vue ไฟล์เดียว: 

 < script >
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Using a css-loader

  export default {
    components : {
      VueSimpleSuggest
    }
  }
</ script >

สร้างการตั้งค่า 

 # clone the repo
git clone https://github.com/KazanExpress/vue-simple-suggest.git
cd ./vue-simple-suggest

# install dependencies
npm install

# serve example with hot reload at localhost
npm run dev

# build example & readme for static serving
npm run docs

การควบคุมเริ่มต้น

ใหม่ในเวอร์ชัน 1.2.0

เหล่านี้เป็นแป้นพิมพ์ลัดเริ่มต้น

สามารถปรับแต่งได้ด้วยอุปกรณ์ controls ฟิลด์ทั้งหมดในออบเจ็กต์ controls นี้เป็นทางเลือก

รูปแบบเริ่มต้น:

กุญแจ (รหัสกุญแจ) คำอธิบาย
Escape (27) หากรายการข้อเสนอแนะปรากฏขึ้น - ให้ซ่อนไว้ กำหนดโดยคุณสมบัติ hideList
ArrowDown (40) หากรายการข้อเสนอแนะถูกซ่อนอยู่ - ให้แสดง กำหนดโดยคุณสมบัติ showList
ArrowUp (38) / ArrowDown (40) หมุนเวียน (โฮเวอร์) ผ่านคำแนะนำ กำหนดโดยคุณสมบัติ selectionUp / selectionDown ตามลำดับ
Enter (13) หากรายการปรากฏขึ้น - เลือกองค์ประกอบที่ไฮไลต์ กำหนดโดยคุณสมบัติ select
(Ctrl/Shift) + Space (32) เลือกองค์ประกอบแรกในรายการ กำหนดโดยคุณสมบัติ autocomplete ใช้งานได้กับปุ่ม Ctrl modifier หรือปุ่ม Shift modifier
(Ctrl/Shift) + Enter (13) เหมือนครั้งก่อนแต่ยังซ่อนรายการข้อเสนอแนะไว้ด้วย

วัตถุ JS: 

 {
  selectionUp : [ 38 ] ,
  selectionDown : [ 40 ] ,
  select : [ 13 ] ,
  showList : [ 40 ] ,
  hideList : [ 27 ] ,
  autocomplete : [ 32 , 13 ]
}

API ส่วนประกอบ

ทีแอลดีอาร์

คลิกเพื่อขยาย 
 <!-- Ref to access the API, v-model for efficient query binding -->
< vue-simple-suggest ref =" vueSimpleSuggest " v-model =" model "
  value-attribute =" id "
  display-attribute =" title "
  mode =" input "
  placeholder =" placeholder!!! "
  :list =" getListFunction "
  :max-suggestions =" 10 "
  :min-length =" 3 "
  :debounce =" 100 "
  :destyled =" false "
  :remove-list =" false "
  :filter-by-query =" false "
  :filter =" customFilterFunction "
  :value =" defaultValue "
  :nullable-select =" true "
  :controls =" {
    selectionUp: [38, 33],
    selectionDown: [40, 34],
    select: [13, 36],
    showList: [40],
    hideList: [27, 35],
    autocomplete: [32, 13],
  } "
  @input =" onInputEvent "
  @select =" onSuggestSelect "
  @hover =" onSuggestHover "
  @focus =" onFocus "
  @blur =" onBlur "
  @request-start =" onRequestStart "
  @request-done =" onRequestDone "
  @request-failed =" onRequestFailed "
  @show-list =" onShowList "
  @hide-list =" onHideList "
>
  <!-- v-model on input itself is useless -->
  < input class =" optional-custom-input " >

  <!-- Appears o top of the list -->
  < template slot =" misc-item-above " slot-scope =" { suggestions, query } " >
    < div class =" misc-item " >
      < span > You're searching for {{ query }}. </ span >
    </ div >
    < div class =" misc-item " >
      < span > {{ suggestions.length }} suggestions are shown... </ span >
    </ div >
    < hr >
  </ template >

  < div slot =" suggestion-item " slot-scope =" { suggestion } " class =" custom " > {{ suggestion.title }} </ div >

  <!-- Appears below the list -->
  < div class =" misc-item " slot =" misc-item-below " slot-scope =" { suggestions } " v-if =" loading " >
    < span > Loading... </ span >
  </ div >
</ vue-simple-suggest >

โครงสร้างคลาส CSS

หากจำเป็นต้องปรับแต่งรูปลักษณ์ของส่วนประกอบ นี่คือโครงสร้างคลาสภายใน: 

 // .designed is applied only if `destyled` prop is false.
.vue-simple-suggest.designed.focus // .focus is applied whenever the component is focused.
  .input-wrapper
    .default-input // Replaced with your custom input if default slot is provided.
  .suggestions // Also has transition classes, see below.
    .suggest-item

หากคุณต้องการใช้คลาสที่มีอยู่หรือเฟรมเวิร์กเช่น Bootstrap คุณสามารถฉีดคลาสของคุณเองโดยใช้ 'styles' prop: 

 <!-- Some component.vue -->
< template >
  < vue-simple-suggest
    v-model =" chosen "
    :list =" simpleSuggestionList "
    :styles =" autoCompleteStyle "
    :destyled = true
    :filter-by-query =" true " >
  </ vue-simple-suggest >
</ template >

< script >
  ...
  export default {
    ...
    data ( ) {
      return {
        autoCompleteStyle : {
          vueSimpleSuggest : "position-relative" ,
          inputWrapper : "" ,
          defaultInput : "form-control" ,
          suggestions : "position-absolute list-group z-1000" ,
          suggestItem : "list-group-item"
        }
      }
    } ,
    ...
  }
</ script > `

< style lang =" scss " >
.z-1000 {
  z-index: 1000;
}
.hover {
  background-color: #007bff;
  color: #fff;
}
</ style >

โครงการ:

คุณสมบัติ คำอธิบาย
vueSimpleSuggest ชื่อคลาสเพิ่มเติมสำหรับองค์ประกอบรูทของคอมโพเนนต์
inputWrapper ชื่อคลาสเพิ่มเติมสำหรับองค์ประกอบ . .input-wrapper
defaultInput ชื่อคลาสเพิ่มเติมสำหรับองค์ประกอบ input หากไม่มีการกำหนดองค์ประกอบอินพุตแบบกำหนดเอง
suggestions ชื่อคลาสเพิ่มเติมสำหรับองค์ประกอบรายการข้อเสนอแนะ ul
miscItemAbove ชื่อคลาสสำหรับ wrapper สล็อต misc-item-above (องค์ประกอบ li เอง)
suggestItem ชื่อคลาสเพิ่มเติมสำหรับองค์ประกอบ li ของรายการคำแนะนำ
miscItemBelow ชื่อคลาสสำหรับ misc-item-below slot wrapper (องค์ประกอบ li เอง)

การเปลี่ยนผ่าน

ใหม่ในเวอร์ชัน 1.8.0

คุณยังสามารถกำหนดการเปลี่ยนผ่านรายการที่กำหนดเองได้โดยการกำหนดกฎ css สำหรับการเปลี่ยนแปลงที่ชื่อ vue-simple-suggest บน .suggestions suggestions div: 

. suggestions {
  /* It's improtant to have a cpecific pivot point for transition:*/
  opacity : 1 ;
}

. vue-simple-suggest-enter-active . suggestions ,
. vue-simple-suggest-leave-active . suggestions {
  /* Transition length here:*/
  transition : opacity .2 s ;
}

. vue-simple-suggest-enter . suggestions ,
. vue-simple-suggest-leave-to . suggestions {
  /* Transition rule for "disengaged" element:*/
  opacity : 0 ;
}

คำจำกัดความของ API

อุปกรณ์ประกอบฉาก

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
controls 1.2.0 วัตถุ ดูการควบคุมเริ่มต้น กำหนดแป้นพิมพ์ลัดในรหัสคีย์ (เพื่อวัตถุประสงค์ในการใช้งานร่วมกับเบราว์เซอร์) อาร์เรย์ให้ความสามารถในการกำหนดหลายคีย์ให้กับการกระทำเดียว ประกอบด้วยช่องอาร์เรย์ 5 ช่อง: selectionUp , selectionDown , select , hideList และ autocomplete ซึ่งทั้งหมดนี้เป็นทางเลือก
max-suggestions ตัวเลข 10 จำนวนคำแนะนำสูงสุดที่จะแสดง ตั้งค่าเป็น 0 สำหรับคำแนะนำที่ไม่มีที่สิ้นสุด
min-length ตัวเลข 1 จำนวนสัญลักษณ์ขั้นต่ำในการป้อนข้อมูลเพื่อทริกเกอร์รายการข้อเสนอแนะ vue-simple-suggest เริ่มทำงานเป็นเมนูแบบเลื่อนลง หากค่าเป็น 0
display-attribute สตริง 'title' คุณสมบัติในวัตถุข้อเสนอแนะที่จะแสดงในรายการ รองรับเส้นทางประ
value-attribute สตริง 'id' คุณสมบัติในออบเจ็กต์คำแนะนำเพื่อใช้เป็นคีย์เฉพาะ รองรับเส้นทางประ
list ฟังก์ชั่นหรืออาร์เรย์ () => [] ฟังก์ชันผู้ให้บริการอาร์เรย์จะต้องยอมรับแบบสอบถามเป็นอาร์กิวเมนต์เดียวเท่านั้น สามารถส่งคืนอาร์เรย์หรือสัญญาได้ สามารถเป็นแบบอะซิงโครนัสได้ ส่วนประกอบทำงานเป็นอินพุตธรรมดาโดยไม่มีฟังก์ชันนี้
debounce ตัวเลข 0 กำหนด list debounce (เวลาระหว่างเหตุการณ์อินพุตและการทำงานของฟังก์ชัน)
destyled บูลีน false ว่าจะยกเลิกการจัดรูปแบบเริ่มต้นของรายการอินพุตและคำแนะนำหรือไม่
styles v1.8.0 วัตถุ {} คลาส CSS ที่จะแนบกับสไตล์ส่วนประกอบปัจจุบัน
remove-list บูลีน false หากเป็นจริง รายการข้อเสนอแนะจะถูกซ่อนอยู่เสมอ
filter-by-query บูลีน false ว่าจะกรองคำแนะนำผลลัพธ์ตามข้อความค้นหาของการป้อนข้อมูลหรือไม่ (ทำให้เป็นองค์ประกอบการค้นหา)
filter การทำงาน - ฟังก์ชันแบบกำหนดเองสำหรับการกรองผลลัพธ์ข้อเสนอแนะที่ยอมรับรายการเดียวและแบบสอบถามเพื่อกรองเป็น 2 อาร์กิวเมนต์ ใช้เฉพาะเมื่อตั้งค่า filter-by-query เป็น true เท่านั้น
mode v1.4.0 สตริง 'input' งาน v-model . กำหนดเหตุการณ์ที่ทริกเกอร์ v-model สามารถเป็นหนึ่งใน 'input' ( v-model ผูกคุณสมบัติที่แสดง) หรือ 'select' ( v-model ผูกรายการที่เลือก)
type , value , pattern , ฯลฯ... แอตทริบิวต์อินพุต HTML5 ทั้งหมดพร้อมค่าเริ่มต้นที่เคารพ
nullable-select v1.9.0 บูลีน false ไม่ว่า select ควรยอมรับ null หรือไม่
preventHide v1.11.0 บูลีน false ไม่ว่าจะเปิดอินพุตไว้หรือไม่ก็ตาม ทำให้ผู้ใช้สามารถเลือกอินพุตหลายอินพุตได้
โหมด

ใหม่ในเวอร์ชัน 1.4.0

กำหนดเหตุการณ์ที่ทริกเกอร์ v-model สามารถเป็นหนึ่งใน 'input' (ค่าเริ่มต้น) หรือ 'select'

ตัวอย่างเช่น หากเลือก 'input' v-model จะอัปเดตค่าทุกครั้งที่เหตุการณ์ input เริ่มทำงาน โดยตั้งค่าสตริงของอินพุต

เช่นเดียวกับ 'select' - v-model จะเปลี่ยนเมื่อมีการเลือกบางสิ่งจากรายการเท่านั้น โดยตั้งค่าที่เลือก (สตริง วัตถุ หรืออะไรก็ตาม) ให้เป็นอาร์กิวเมนต์

กรณีการใช้งานที่เหมาะสมสำหรับเมื่อเราต้องการใช้ส่วนประกอบเฉพาะสำหรับการเชื่อมโยงการเลือกและอินพุตแบบกำหนดเองสำหรับการเชื่อมโยงข้อความ: 

 < vue-simple-suggest v-model =" selected " mode =" select " >
  < input v-model =" text " >
</ vue-simple-suggest >

เหตุการณ์ที่ปล่อยออกมา

ชื่อ ข้อโต้แย้ง คำอธิบาย
input เหตุการณ์อินพุต HTML การฉายภาพภายนอกของเหตุการณ์อินพุตปัจจุบัน
focus เหตุการณ์โฟกัส HTML การฉายภาพภายนอกของเหตุการณ์อินพุตปัจจุบัน
blur เหตุการณ์โฟกัส HTML การฉายภาพภายนอกของเหตุการณ์อินพุตปัจจุบัน
select คำแนะนำที่เลือก เริ่มทำงานเมื่อเลือกคำแนะนำ (ด้วยการคลิกเมาส์หรือกดปุ่ม)
hover คำแนะนำที่ถูกโฮเวอร์ องค์ประกอบเป้าหมาย เริ่มทำงานทุกครั้งที่มีการไฮไลต์คำแนะนำใหม่ (ผ่านการเลื่อนเคอร์เซอร์หรือลูกศรบนแป้นพิมพ์)
suggestion-click คำแนะนำที่เลือก เหตุการณ์การคลิก HTML เริ่มทำงานเมื่อคลิกองค์ประกอบคำแนะนำ
show-list - เริ่มทำงานทุกครั้งที่สลับรายการคำแนะนำให้แสดงรายการ
hide-list - เริ่มทำงานทุกครั้งที่รายการคำแนะนำถูกซ่อน
request-start ค่าอินพุตปัจจุบัน (แบบสอบถาม) เริ่มทำงานทุกครั้งที่ฟังก์ชัน list เริ่มทำงาน
request-done รายการข้อเสนอแนะที่เกิดขึ้น เริ่มทำงานเมื่อฟังก์ชัน list ส่งคืนผลลัพธ์สำเร็จและส่งต่อผลลัพธ์นั้นเป็นอาร์กิวเมนต์
request-failed ข้อยกเว้นที่ขัดจังหวะ ยิงถ้ามีข้อยกเว้นเกิดขึ้นระหว่างการดำเนินการของฟังก์ชัน list

วิธีการอ้างอิง

เข้าถึงได้ผ่าน $refs.*your ref name here*

ชื่อ ข้อโต้แย้ง คำอธิบาย
showList - แสดงรายการข้อเสนอแนะ เปล่งเหตุการณ์อันทรงเกียรติ
hideList - ซ่อนรายการข้อเสนอแนะ เปล่งเหตุการณ์อันทรงเกียรติ
getSuggestions query : string รับและประมวลผลข้อเสนอแนะจาก list เสา กลับให้คำมั่นสัญญา ปล่อยเหตุการณ์ requestStart , requestDone และ requestFailed
research - debounced getSuggestions กับค่าอินพุตปัจจุบัน
clearSuggestions - ล้างอาร์เรย์ suggestions
select คำแนะนำ เลือกข้อเสนอแนะที่ผ่าน เปล่งเหตุการณ์อันทรงเกียรติ
hover คำแนะนำ วางเมาส์เหนือคำแนะนำที่ผ่านไป เปล่งเหตุการณ์อันทรงเกียรติ
displayProperty คำแนะนำ ส่งกลับคุณสมบัติที่แสดงของข้อเสนอแนะ
valueProperty คำแนะนำ ส่งกลับค่าทรัพย์สินของข้อเสนอแนะ
setText 1.9.0 ข้อความ ตั้งค่าข้อความที่กำหนดเองลงในช่องป้อนข้อมูลได้อย่างน่าเชื่อถือ
autocompleteText v1.10.0 คำแนะนำ เติมข้อความที่ป้อนให้สมบูรณ์อัตโนมัติโดยใช้คำแนะนำที่ส่งผ่านเป็นอาร์กิวเมนต์เดียว

อ้างอิงตัวจัดการเหตุการณ์

เข้าถึงได้ผ่าน $refs.*your ref name here*

คุณสามารถใช้สิ่งเหล่านี้เพื่อเลียนแบบพฤติกรรมบางอย่างของส่วนประกอบ

ชื่อ ข้อโต้แย้ง คำอธิบาย
onShowList เรียกใช้เมื่อจำเป็นต้องแสดงรายการข้อเสนอแนะ
showSuggestions แสดงรายการคำแนะนำ รีเฟรชข้อมูลหากจำเป็น
onInput เหตุการณ์อินพุต HTML เรียกเมื่อใดก็ตามที่ข้อความที่ป้อนมีการเปลี่ยนแปลง ปล่อยเหตุการณ์ input
onFocus เหตุการณ์โฟกัส HTML เรียกใช้เมื่อใดก็ตามที่อินพุตเข้าสู่โฟกัส จะปล่อยเหตุการณ์ focus
onBlur เหตุการณ์โฟกัส HTML คำตรงข้ามกับ onFocus
onAutocomplete - เรียกใช้เมื่อมีการกดแป้นพิมพ์ลัดเติมข้อความอัตโนมัติ เลือกข้อเสนอแนะแรก
onListKeyUp เหตุการณ์การคีย์ HTML เรียกใช้บนการคีย์คอมโพเนนต์ ใช้ภายในเพื่อซ่อนรายการ
onKeyDown เหตุการณ์การกดปุ่ม HTML เรียกใช้เมื่อคอมโพเนนต์คีย์ดาวน์ ใช้ภายในเพื่อแสดงรายการ อัปเดตข้อเสนอแนะ และป้องกันการส่งแบบฟอร์ม
moveSelection เรียกใช้เมื่อจำเป็นต้องเปลี่ยนองค์ประกอบที่โฮเวอร์
suggestionClick suggestion เหตุการณ์การคลิก HTML เรียกใช้ข้อเสนอแนะใด ๆ คลิก สามารถใช้เพื่อจำลองการคลิกดังกล่าวจากด้านนอกของส่วนประกอบ

ข้อมูลอ้างอิง

เข้าถึงได้ผ่าน $refs.*your ref name here*

ชื่อ ค่าเริ่มต้น คำอธิบาย
selected null องค์ประกอบที่เลือกในปัจจุบัน
hovered null องค์ประกอบที่โฮเวอร์อยู่ในปัจจุบัน
suggestions [] รายการข้อเสนอแนะปัจจุบัน
textLength 0 ความยาวของข้อความในการป้อนข้อมูล
listShown false แสดงรายการข้อเสนอแนะ
inputElement null ปัจจุบันใช้ HTMLInputElement
canSend true ไม่ว่า getListFuncion ที่กำหนดจะสามารถดำเนินการได้หรือไม่
timeoutInstance null การหมดเวลาจนกว่าจะมีการดำเนินการ getListFunction ครั้งถัดไป
text $props.value ข้อความอินพุตปัจจุบัน
slotIsComponent false ไม่ว่าอินพุตแบบกำหนดเองปัจจุบันนี้เป็นคอมโพเนนต์ vue หรือไม่
listIsRequest - ไม่ว่า list prop จะเป็นฟังก์ชันหรือไม่
input - การอ้างอิงถึงอินพุตปัจจุบัน (ส่วนประกอบหรือวานิลลา)
hoveredIndex - ดัชนีองค์ประกอบที่โฮเวอร์ปัจจุบัน
controlScheme การควบคุมเริ่มต้น รูปแบบการควบคุมในปัจจุบัน
isPlainSuggestion false รายการข้อเสนอแนะปัจจุบันประกอบด้วยสตริงธรรมดา (ไม่ใช่วัตถุ) หรือไม่
isClicking false true หากผู้ใช้คลิกอยู่ในปัจจุบัน
isOverList false true หากผู้ใช้เลื่อนเมาส์ไปที่รายการข้อเสนอแนะ
isInFocus false true หากองค์ประกอบอยู่ในโฟกัสในปัจจุบัน
isTabbed false true หากผู้ใช้กดแท็บ ขณะที่ส่วนประกอบอยู่ในโฟกัส
isSelectedUpToDate false true หากผู้ใช้ไม่ได้ป้อนข้อมูลใดๆ ตั้งแต่การเลือกครั้งล่าสุด ดังนั้นการเลือกจึงยังคงมีความเกี่ยวข้อง

สล็อต

อินพุตที่กำหนดเอง

สล็อตเริ่มต้น (ไม่จำเป็น)

รองรับการทำรัง อุปกรณ์ประกอบฉากอินพุตสามารถส่งผ่านไปยังอินพุตที่กำหนดเองได้ เพื่อหลีกเลี่ยงการประมวลผลโดย vue-simple-suggest ตั้งค่าเริ่มต้นเป็นอินพุตแบบธรรมดาโดยมีอุปกรณ์ประกอบฉากส่งผ่านไปยัง vue-simple-suggest

คำเตือน: v-model บนอินพุตที่กำหนดเองไม่เหมือนกับ v-model บน vue-simple-suggest! 

 <!--  Default HTMLInputElement example:  -->
< vue-simple-suggest v-model =" model " placeholder =" Text here " type =" search " pattern =" [a-z]+ "/>
 <!--  Vanilla HTMLInputElement example 1:  -->
< vue-simple-suggest >
  < input pattern =" [a-z]+ " >
</ vue-simple-suggest > 
 <!--  Vanilla HTMLInputElement example 2:  -->
< vue-simple-suggest v-model =" model " placeholder =" Text here " type =" search " >
</ vue-simple-suggest > 
 <!--  Vanilla HTMLInputElement example 3 (fully equivalent to the second example):  -->
< vue-simple-suggest v-model =" model " >
  < input placeholder =" Text here " type =" search " >
</ vue-simple-suggest > 
 <!--  Vanilla HTMLInputElement example 4 (nested):  -->
< vue-simple-suggest v-model =" model " >
  < div >
    < section >
      < input type =" email " >
    </ section >
  </ div >
</ vue-simple-suggest > 
 <!--  Vue component example (also supports nesting):  -->
< vue-simple-suggest v-model =" vModelGoesHere " >
  < my-custom-input-somponent :value =" initialInputValueGoesHere " > </ my-custom-input-somponent >
</ vue-simple-suggest >

คำเตือนส่วนประกอบอินพุตแบบกำหนดเอง:

หากต้องการทำงานกับ vue-simple-suggest องค์ประกอบอินพุตที่กำหนดเองของคุณจะต้องเป็นไปตามลักษณะการทำงานมาตรฐานบางอย่าง

องค์ประกอบอินพุตที่กำหนดเอง ต้อง (เพื่อให้ทำงานได้อย่างถูกต้อง):

  • ปล่อยเหตุการณ์ input
  • ปล่อย focus และ blur เหตุการณ์
  • มีพร็อพอันทรง value

องค์ประกอบอินพุตที่กำหนดเอง ควร (เพื่อหลีกเลี่ยงข้อ จำกัด การใช้งาน):

  • ไม่หยุดการแพร่กระจายเหตุการณ์ใด ๆ จากองค์ประกอบ HTML อินพุตภายใน
  • ส่งต่ออาร์กิวเมนต์เหตุการณ์ดั้งเดิมด้วย focus และ blur เหตุการณ์

หาก vue-simple-suggest กับองค์ประกอบที่คุณกำหนดเองไม่ตอบสนองต่อการเปลี่ยนแปลงตัวแปรภายนอก ให้ผูก v-model ของส่วนประกอบทั้งสองเข้ากับตัวแปรเดียวกัน เช่น: 

 < vue-simple-suggest v-model =" model " >
  < my-custom-input-somponent v-model =" model " > </ my-custom-input-somponent >
</ vue-simple-suggest >
การเข้าถึงข้อมูลเข้าแบบกำหนดเอง

ใหม่ในเวอร์ชัน 1.9.0

vue-simple-suggest จะแทรกแอตทริบิวต์ ARIA ที่จำเป็น 3 รายการโดยอัตโนมัติสำหรับองค์ประกอบ <input> เริ่มต้นและอินพุตที่กำหนดเองใดๆ ตราบใดที่องค์ประกอบอินพุตที่กำหนดเองของคุณมีองค์ประกอบ html <input>

คุณลักษณะเหล่านี้ช่วยให้แน่ใจว่าผู้ใช้ที่ใช้โปรแกรมอ่านหน้าจอสามารถใช้การเติมข้อความอัตโนมัติได้

ชื่อ ค่า คำอธิบาย
aria-เติมข้อความอัตโนมัติ "list" บ่งชี้ว่าพฤติกรรมการเติมข้อความอัตโนมัติคือการแนะนำรายการค่าที่เป็นไปได้ในป๊อปอัป
อาเรียควบคุม IDREF ของรายการ suggestions IDREF ขององค์ประกอบป๊อปอัปที่แสดงรายการค่าที่แนะนำ
aria-ใช้งานลูกหลาน IDREF ของตัวเลือกที่โฮเวอร์ ช่วยให้เทคโนโลยีช่วยเหลือทราบว่าองค์ประกอบใดที่แอปพลิเคชันถือว่าโฟกัส ในขณะที่โฟกัส DOM ยังคงอยู่ในองค์ประกอบอินพุต
รายการคำแนะนำที่กำหนดเอง

ช่อง suggestion-item (ไม่บังคับ)

คำอธิบาย

อนุญาตการกำหนด html ที่กำหนดเองของรายการคำแนะนำในรายการ ค่าเริ่มต้นคือ <span>{{ displayAttribute(suggestion) }}</span>

ยอมรับออบเจ็กต์ suggestion และข้อความ query เป็นค่าแอตทริบิวต์ slot-scope 

 <!-- Example (book suggestions): -->
< vue-simple-suggest >
  < div slot =" suggestion-item " slot-scope =" { suggestion, query } " >
    < div > {{ suggestion.title }} by {{ suggestion.author }} </ div >
  </ div >
</ vue-simple-suggest >

ปุ่มกำหนดเองภายในรายการคำแนะนำ

หากคุณต้องการเพิ่มปุ่มการทำงานลงในรายการคำแนะนำ เพียงใช้ตัวแก้ไขคำสั่ง .stop เพื่อป้องกัน suggestion-click : 

 <!-- Example (editable book suggestion): -->
< vue-simple-suggest >
  < div slot =" suggestion-item " slot-scope =" { suggestion, query } " >
    < span > {{ suggestion.title }} by {{ suggestion.author }} </ span >
    < button @click.stop =" remove(suggestion) " > remove from list </ button >
    < button @click.stop =" like(suggestion) " > add to favorites </ button >
  </ div >
</ vue-simple-suggest >

ในกรณีนี้ ปุ่มต่างๆ จะดำเนินการเฉพาะวิธีที่ผูกไว้เท่านั้น และจะไม่เลือกรายการที่แนะนำ

เติมข้อความอัตโนมัติด้วยตนเอง

หากจำเป็นต้องเติมคำแนะนำอัตโนมัติในการป้อนข้อมูลแทนการเลือก (เช่น ในคำแนะนำบนมือถือของการค้นหาโดย Google) คุณสามารถใช้ฟังก์ชัน autocomplete() ในขอบเขตของช่องได้: 

 <!-- Example: -->
< vue-simple-suggest >
  < div slot =" suggestion-item " slot-scope =" { suggestion, autocomplete } " >
    < span > {{ suggestion.title }} by {{ suggestion.author }} </ span >
    < button @click.stop =" autocomplete() " > Complete input </ button >
  </ div >
</ vue-simple-suggest >

หรือในวิธีการอ้างอิง: 

 < template >
  < vue-simple-suggest ref =" suggest " >
    < div slot =" suggestion-item " slot-scope =" { suggestion } " >
      < span > {{ suggestion.title }} by {{ suggestion.author }} </ span >
      < button @click.stop =" onAutocompleteButtonClick(suggestion) " > Complete input </ button >
    </ div >
  </ vue-simple-suggest >
</ template >

< script >
export default {
  //...
  methods : {
    onAutocompleteButtonClick ( suggestion ) {
      this . $refs . suggest . autocompleteText ( suggestion ) ;
    }
  }
  //...
}
</ script >

ข้อมูลอ้างอิง

ด้วยความร่วมมือกับช่องอ้างอิง ช่องนี้สามารถใช้เพื่อเปลี่ยนแปลงพฤติกรรมรายการข้อเสนอแนะได้อย่างมาก

ตัวอย่างที่ง่ายที่สุดตัวอย่างหนึ่งคือการเน้นข้อความค้นหาในผลลัพธ์: 

 < div slot =" suggestion-item " slot-scope =" scope " >
  < span v-html =" boldenSuggestion(scope) " > </ span >
</ div > 
 boldenSuggestion ( scope ) {
  if ( ! scope ) return scope ;

  const { suggestion , query } = scope ;

  let result = this . $refs . suggestComponent . displayProperty ( suggestion ) ;

  if ( ! query ) return result ;

  const texts = query . split ( / [s-_/\|.] / gm ) . filter ( t => ! ! t ) || [ '' ] ;
  return result . replace ( new RegExp ( '(.*?)(' + texts . join ( '|' ) + ')(.*?)' , 'gi' ) , '$1<b>$2</b>$3' ) ;
}

ผลลัพธ์ผ่าน API การค้นหาของ Google หนังสือ:

ช่องรายการเบ็ดเตล็ดที่กำหนดเอง

misc-item-above และ misc-item-below (ไม่บังคับ)

อนุญาตให้แสดงองค์ประกอบที่กำหนดเองในรายการคำแนะนำ องค์ประกอบเหล่านี้จะไม่หายไปจากรายการ ไม่สามารถเลือกหรือวางเมาส์เหนือได้

สามารถใช้สำหรับตกแต่ง รถตัก ข้อความแสดงข้อผิดพลาด และอื่นๆ

ช่องเหล่านี้ไม่มีค่าเริ่มต้น ดังนั้นจึงจะไม่แสดงจนกว่าจะกำหนด

ยอมรับอาร์เรย์ suggestions และข้อความ query เป็นค่าแอตทริบิวต์ slot-scope 

 <!-- Examples: -->
< vue-simple-suggest >
  < template slot =" misc-item-above " slot-scope =" { suggestions, query } " >
    < div class =" misc-item " >
      < span > You're searching for {{ query }}. </ span >
    </ div >
    < div class =" misc-item " >
      < span > {{ suggestions.length }} suggestions are shown... </ span >
    </ div >
  </ template >

  < div slot =" misc-item-below " slot-scope =" { suggestions } " v-if =" isLoading " class =" misc-item " >
    < span > Loading... </ span >
  </ div >
</ vue-simple-suggest >

ช่องเหล่านี้ยังสามารถใช้เพื่อจัดการกับผลลัพธ์ที่ว่างเปล่า เช่นนี้ 

 <!-- Main slot template -->
< template slot =" misc-item-above " slot-scope =" { suggestions, query } " >
  < div class =" misc-item " >
    < span > You're searching for '{{ query }}'. </ span >
  </ div >

  <!-- Sub-template if have any suggestions -->
  < template v-if =" suggestions.length > 0 " >
    < div class =" misc-item " >
      < span > {{ suggestions.length }} suggestions are shown... </ span >
    </ div >
    < hr >
  </ template >

  <!-- Show "No result" otherwise, if not loading new ones -->
  < div class =" misc-item " v-else-if =" !loading " >
    < span > No results </ span >
  </ div >
</ template >

ผู้ร่วมให้ข้อมูล

ขอขอบคุณผู้คนที่แสนวิเศษเหล่านี้ (คีย์อีโมจิ):


อเล็กซ์
-
คาเรน
-
ซิเมียน เคอร์โคลา
-
โรเบอร์สัน คอสต้า
-
รอสดี คาซิม

อองตวนมาตียา
-
แมทเธียส มาร์ติน
-

ร็อบ เบรน
- -
คุณวุค
-
นัตทัม
-
ปีเตอร์
-
RMโฟการ์ตี

ไบรอัน มอนซาเลส

มิลา76
-

อังเดร ลอฟเบิร์ก
-
บรูโน่ มอนเตโร
-
ฮันเนสซาซาเม็ตส์
-
จิมมี่
-
วิลล์ เพลิน
-
ลอริ911
-
อเล็กซ์ ไฮเรียเวตส์
-

เบนูด คานี
-
เฮย์ คราเนน

เหินห่าง
- -
เพต้า ดราโกส-อันเดรย์
-
โชโตะ

ยามาเก็น0915
-

โครงการนี้เป็นไปตามข้อกำหนดของผู้มีส่วนร่วมทั้งหมด ยินดีมีส่วนร่วมทุกรูปแบบ!

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