الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

اقتراح بسيط

مكون الإكمال التلقائي البسيط والغني بالميزات لـ Vue.js

ثَبَّتَ 

npm install --save vue-simple-suggest

راجع دليل التثبيت لمزيد من الخيارات.

جدول المحتويات

  • اقتراح بسيط
    • ثَبَّتَ
    • جدول المحتويات
    • ما هذا
      • سمات
      • ميزات جديدة؟
    • أمثلة:
      • مثال بسيط
      • مثال غير متزامن
    • تثبيت
      • الآلية الوقائية الوطنية
      • فك
      • استيراد
        • حشوات متعددة
      • الاستخدام
    • بناء الإعداد
    • الضوابط الافتراضية
    • واجهة برمجة التطبيقات للمكونات
      • TLDR
      • هيكل فئة CSS
        • التحولات
      • تعريفات واجهة برمجة التطبيقات
        • الدعائم
          • وضع
        • الأحداث المنبعثة
        • طرق المرجع
        • المرجع معالجات الأحداث
        • بيانات المرجع
      • فتحات
        • إدخال مخصص
        • إمكانية الوصول على المدخلات المخصصة
        • عنصر اقتراح مخصص
        • فتحات مخصصة للعناصر المتنوعة
    • المساهمين

ما هذا

هذا مكون اقتراح/إكمال تلقائي بسيط ولكنه غني بالميزات لـ Vue.js.

في الواقع، إنها غنية بالميزات، لدرجة أنه من الممكن القيام بأشياء مجنونة بها، مثل

  • تقليد القوائم المنسدلة والقوائم المنسدلة
  • تحويل قائمة الاقتراحات إلى جدول اقتراحات فعلي
  • العمل مع أي نوع من المدخلات المخصصة التي تم تمريرها (مثل type=button، والراديو، وما إلى ذلك)
  • ... وأشياء أخرى كثيرة

وعلى سبيل المكافأة، فهو خفيف جدًا.

سمات

  • دعم v-model .
  • سمات إمكانية الوصول التلقائي (WAI-ARIA كاملة)
  • تبديل نوع v-model (تحديد/إدخال).
  • عنصر إدخال مخصص من خلال الفتحة الافتراضية.
  • عناصر القائمة المخصصة من خلال فتحات محددة النطاق.
  • يتم توفير كافة الدعائم الصالحة لـ HTML5 لعنصر الإدخال الافتراضي ( type ، tabindex ، وما إلى ذلك...).
  • ضوابط لوحة المفاتيح قابلة للتخصيص.
  • واجهة برمجة التطبيقات الغنية والبسيطة.
  • فئات CSS لإعادة التصميم بسرعة وسهولة.
  • العديد من متغيرات البناء للاختيار من بينها.
  • تصميم مكونات مرنة وقابلة للتخصيص.
  • عمليات تعبئة اختيارية لـ 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 >

مثال غير متزامن

إذا كنت تتعامل مع بيانات غير متزامنة من الخادم (على سبيل المثال باستخدام 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 مزودًا بالحد الأدنى من عمليات التعبئة الاختيارية لـ IE11+ - Object.assign و Element.prototype.closest . 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 أو مفتاح التعديل Shift .
(Ctrl/Shift) + Enter (13) مثل السابق، ولكنه يخفي أيضًا قائمة الاقتراحات.

كائن شبيبة: 

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

واجهة برمجة التطبيقات للمكونات

TLDR

انقر للتوسيع 
 <!-- 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' : 

 <!-- 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 اسم الفئة لـ misc-item-above فتحة الغلاف (عنصر li نفسه).
suggestItem اسم فئة إضافي لعنصر الاقتراح li .
miscItemBelow اسم الفئة لغطاء الفتحة misc-item-below (عنصر li نفسه).

التحولات

الجديد في الإصدار 1.8.0

يمكنك أيضًا تحديد انتقالات القائمة المخصصة عن طريق تحديد قواعد CSS للانتقال المسمى vue-simple-suggest في قسم .suggestions : 

. 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 ;
}

تعريفات واجهة برمجة التطبيقات

الدعائم

اسم يكتب تقصير وصف
controls v1.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 (الوقت بين حدث الإدخال وتنفيذ الوظيفة).
destyled منطقية false ما إذا كان سيتم إلغاء التصميم الافتراضي لقائمة الإدخال والاقتراحات.
styles v1.8.0 هدف {} فئات CSS لإرفاقها بنمط المكون الحالي.
remove-list منطقية false إذا كان هذا صحيحًا - فستكون قائمة الاقتراحات مخفية دائمًا.
filter-by-query منطقية false ما إذا كان سيتم تصفية الاقتراحات الناتجة عن طريق الاستعلام النصي للإدخال (اجعله مكون بحث).
filter وظيفة - وظيفة مخصصة لتصفية نتائج الاقتراحات التي تقبل عنصرًا واحدًا واستعلامًا للتصفية باستخدام الوسيطتين. يُستخدم فقط إذا تم تعيين 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 فقط عند تحديد شيء ما من القائمة، مع ضبط القيمة المحددة (سلسلة أو كائن أو أي شيء آخر) على وسيطتها.

حالة الاستخدام المناسبة عندما يريد المرء استخدام المكون فقط لربط التحديد والإدخال المخصص لربط النص: 

 < 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 : سلسلة يحصل على الاقتراحات ويعالجها من دعامة list . يعود الوعد. يُصدر أحداث requestStart و requestDone و requestFailed .
research - تم رفض getSuggestions على قيمة الإدخال الحالية.
clearSuggestions - مسح مجموعة suggestions .
select اقتراح تحديد الاقتراح الذي تم تمريره. ينبعث الحدث المحترم.
hover اقتراح قم بالتمرير فوق الاقتراح الذي تم تمريره. ينبعث الحدث المحترم.
displayProperty اقتراح إرجاع الخاصية المعروضة للاقتراح.
valueProperty اقتراح إرجاع خاصية القيمة للاقتراح.
setText v1.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 - ما إذا كانت دعامة القائمة هي دالة.
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 لكلا المكونين بنفس المتغير، كما يلي: 

 < 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 تلقائيًا بإدخال 3 سمات ARIA ضرورية لعنصر <input> الافتراضي وأي إدخال مخصص، طالما أن مكون الإدخال المخصص الخاص بك يحتوي على عنصر html <input> .

تضمن هذه السمات إمكانية استخدام الإكمال التلقائي بواسطة المستخدمين الذين يعتمدون على قارئات الشاشة.

اسم قيمة وصف
aria-الإكمال التلقائي "list" يشير إلى أن سلوك الإكمال التلقائي لإدخال النص هو اقتراح قائمة بالقيم المحتملة في نافذة منبثقة.
ضوابط الأغنية IDREF من قائمة suggestions IDREF للعنصر المنبثق الذي يسرد القيم المقترحة.
aria-activedescendant 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' ) ;
}

النتيجة عبر واجهة برمجة تطبيقات بحث كتب 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 >

المساهمين

شكرًا لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):


أليكسي
؟
كارين
؟
سيمون كيركولا
؟
روبرسون كوستا
؟
رشدي قاسم

antoinematyja
؟
ماتياس مارتن
؟

روب برين
؟ ؟
السيد ووك
؟
ناتام
؟
بيتر
؟
آر إم فوغارتي

بريان مونساليس

ميلة76
؟

أندريه لوفبيرج
؟
برونو مونتيرو
؟
hannesaasamets
؟
جيمي
؟
ويل بلين
؟
لوري911
؟
أليكس هيريافيتس
؟

بنود خاني
؟
هاي كرانين

com.shrpne
؟ ؟
بيتا دراغوس أندريه
؟
شويتو

yamagen0915
؟

يتبع هذا المشروع مواصفات جميع المساهمين. المساهمات من أي نوع هي موضع ترحيب!

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل