vue2 autocomplete

الإكمال التلقائي لـ Vue 2

مكون الإكمال التلقائي لـ Vue 2. يعتمد على الإكمال التلقائي vue. عرض حي هنا!

ثَبَّتَ

يمكنك استيراد 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 الخاص بك.

معلمة (سلسلة: "ف")

اسم معلمة البحث للاستعلام عنها في مكالمة Ajax. الافتراضي هو q

الحد الأدنى (الرقم: 0)

الحد الأدنى من الأحرف المكتوبة قبل إجراء استعلام البحث. الافتراضي هو 0

مرساة * (سلسلة)

إنه مسار خاصية كائن يستخدم لـ Anchor في قائمة الاقتراحات. سيحصل مثال anchor="name" على خاصية الاسم لكائن JSON الخاص بك. مثل ("Bambang"، "Sukijan"، "Bejo") في العرض التوضيحي أعلاه. أو يمكنك الوصول إلى القيمة العميقة لكائنك. مثل anchor="geometry.location.lat"

التسمية (سلسلة)

نفس المرساة ولكنها تستخدم للعنوان الفرعي أو وصف القائمة

الخيارات (المصفوفة)

قم بتمرير مجموعة من خيارات القائمة يدويًا إلى الإكمال التلقائي.

filterByAnchor (منطقي: صحيح)

عندما تستخدم خيارات الدعائم، يمكنك الحصول على الإكمال التلقائي لتصفية بياناتك. أو يمكنك فقط إظهار بياناتك مباشرةً دون الحاجة إلى أي فلتر من الإكمال التلقائي. سيتم تصفية الخيارات حسب المرساة ووفقًا لإدخال المستخدم.

encodeParams (منطقية: صحيح)

سيقوم الإكمال التلقائي encodeURIComponent لجميع المعلمات الخاصة بك قبل إرسال ajax، عندما يتم تعيين هذه الدعائم على true . الافتراضي true رقم 35

الرفض (العدد)

تأخير الوقت قبل إجراء اياكس للبيانات

مطلوب (منطقي)

السمة المطلوبة للإدخال

العنصر النائب (سلسلة)

العنصر النائب للإدخال

اسم الفئة (سلسلة)

اسم فئة مخصصة لمكون الإكمال التلقائي

الفئات (الكائن)

فئة مخصصة محددة لكل جزء. متاح: المجمع، الإدخال، القائمة، والعنصر

معرف (سلسلة)

اسم معرف مخصص لمكون الإكمال التلقائي

الرفض (عدد)

عدد المللي ثانية التي يجب على المستخدم التوقف عن الكتابة فيها قبل إرسال الطلب. القيمة الافتراضية هي 0، مما يعني أن جميع الطلبات يتم إرسالها على الفور.

عملية (وظيفة)

وظيفة لمعالجة نتيجة واجهة برمجة التطبيقات (API) بها. يجب أن يُرجع مصفوفة من الإدخالات أو كائنًا يمكن تعداد خصائصه.

القالب (الوظيفة)

وظيفة لمعالجة كل نتيجة. يأخذ نوع عنصر رد واجهة برمجة التطبيقات (API) ويجب أن يعرض بيانات HTML.

أحداث رد الاتصال

يمكنك إجراء حدث رد الاتصال عبر الدعائم.

onInput (وظيفة)

عند إدخال الحدث في الإكمال التلقائي

أون شو (الوظيفة)

في عرض الحدث في قائمة الإكمال التلقائي

onBlur (وظيفة)

عندما يكون الإكمال التلقائي غير واضح

إخفاء (وظيفة)

عندما تكون قائمة الإكمال التلقائي مخفية

التركيز على (وظيفة)

عند الإكمال التلقائي للإدخال في وضع التركيز

onSelect (الوظيفة)

عندما يختار المستخدم عنصرًا واحدًا في القائمة

onBeforeAjax (الوظيفة)

قبل إرسال اياكس

onAjaxProgress (الدالة)

بينما يقوم اياكس بجلب البيانات

onAjaxLoaded (الوظيفة)

عندما يتم تحميل عملية اياكس بالكامل

onShouldGetData (وظيفة)

معالجة عملية اياكس بأكملها يدويًا. إذا كان وعدًا، فيجب أن يحل خيارات قائمة الإكمال التلقائي. إذا لم يكن وعدًا، فيمكنك تمرير الخيارات يدويًا إلى دعائم الإكمال التلقائي

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

قيمة المجموعة (سلسلة)

لتعيين قيمة إدخال الإكمال التلقائي

شكرا لكم لجعل هذا مفيدا ~

دعونا نتحدث عن بعض المشاريع معي

فقط اتصل بي على:

• البريد الإلكتروني: [email protected]
• معرف سكايب: bosnaufal254
• تويتر: @BosNaufal

رخصة

حقوق الطبع والنشر لمعهد ماساتشوستس للتكنولوجيا (ج) 2016 - للأبد نوفل رباني