instatype

instatype

مكون الإكمال التلقائي للهواتف المحمولة

العرض التوضيحي

unsplash.now.sh (المصدر)

ثَبَّتَ

npm install instatype --save

يساهم

npm run example لتشغيل تطبيق المثال مع التحميل الساخن لمصدر النموذج لسهولة التطوير.

الاستخدام

 import React from 'react' ;
import Instatype from 'instatype' ;

class Component extends React . Component {

  render ( ) {
    return < Instatype requestHandler = { myRequestHandler } selectedHandler = { mySelectedHandler } / > ;
  }
} 

الدعائم

دعم	وصف
placeholder	نص العنصر النائب للإدخال
limit	عدد النتائج التي يمكن إظهارها في القائمة المنسدلة
thumbStyle	تعيين صور النتيجة على "Circle" أو "Square"
loadingIcon	مسار إلى رمز التحميل المخصص
requestHandler	الوظيفة المطلوبة التي تجلب البيانات ، تضيف خصائص "صورة" و "اسم" لكل كائن في صفيف الاستجابة ، ثم تقوم بتمرير البيانات مرة أخرى إلى مكون النموذج. انظر وظيفة requestHandler مثال أدناه.
selectedHandler	الوظيفة المطلوبة التي يتم استدعاؤها عند النقر فوق نتيجة القائمة المنسدلة. سيتم تمرير هذا الكائن الكامل المستخدم في البداية لإلغاء هذا يؤدي إلى القائمة المنسدلة.

مثال requestHandler

requestHandlerUsers: function ( query , limit , callback ) {

  $ . ajax ( {
    url : "https://api.instagram.com/v1/users/search" ,
    dataType : "jsonp" ,
    data : {
      client_id : this . props . instagramClientId ,
      q : query ,
      count : limit
    } ,
    success : function ( data ) {
      // Instatype expects an "image" and "name" for each result
      var renamedData = data . data . map ( function ( result ) {
        result . image = result . profile_picture ;
        result . name = result . username ;
        return result ;
      } ) ;
      
      callback ( renamedData ) ;
    }
  } ) ;

}