jquery autocompleter

jQuery البرنامج المساعد للإكمال التلقائي

تجريبي

هنا: مثال مع ألوان كرايولا.

الاستخدام

تثبيت

npm:

npm install --save jquery-autocompleter

غزل:

yarn add jquery-autocompleter

إضافة البرنامج المساعد لمشروعك

• تشمل مسج:

   < script src =" http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js " > </ script >

• تضمين رمز البرنامج المساعد:

   <!-- Styles -->
  < link rel =" stylesheet " href =" css/jquery.autocompleter.css " />
  
  <!-- Scripts -->
  < script src =" js/jquery.autocompleter.min.js " > </ script >

• استدعاء البرنامج المساعد:

   $ ( "input" ) . autocompleter ( {
    /* options */
  } ) ; 

أمثلة

• عنوان URL البعيد

   $ ( function ( ) {
    $ ( "input" ) . autocompleter ( { source : "path/to/get_data_request" } ) ;
  } ) ;

• سهل

   var data = [
    { value : 1 , label : "one" } ,
    { value : 2 , label : "two" } ,
    { value : 3 , label : "three" } ,
  ] ;
  
  $ ( function ( ) {
    $ ( "input" ) . autocompleter ( { source : data } ) ;
  } ) ; 

خيارات

يحتوي الإكمال التلقائي على الخيارات التالية:

اسم	يكتب	وصف	ديفولت
مصدر	شارع، كائن	عنوان URL للخادم أو كائن محلي	باطل
asLocal	منطقي	تحليل الاستجابة عن بعد كمصدر محلي	خطأ شنيع
فارغ	منطقي	قم بالتشغيل إذا كانت القيمة فارغة	حقيقي
حد	كثافة العمليات	عدد النتائج التي سيتم عرضها	10
minLength	كثافة العمليات	الحد الأدنى لطول الإكمال التلقائي	0
تأخير	كثافة العمليات	بضعة ميلي ثانية لتأجيل الطلب	0
customClass	صفيف	صفيف مع فئات مخصصة لعنصر الإكمال التلقائي	[]
مخبأ	منطقي	احفظ بيانات xhr في localStorage لتجنب تكرار الطلبات	حقيقي
cacheExpires	كثافة العمليات	عمر بيانات localStorage بالثواني (0 لتعطيل انتهاء صلاحية ذاكرة التخزين المؤقت)	86400
FocusOpen	منطقي	قم بتشغيل الإكمال التلقائي عندما يتم التركيز على الإدخال	حقيقي
أدخل حدد	منطقي	يسمح بالاختيار باستخدام مفتاح الإدخال	حقيقي
تَلمِيح	منطقي	أضف تلميحًا إلى الإدخال باستخدام أول تسمية مطابقة، ويجب تثبيت الأنماط الصحيحة	خطأ شنيع
حدد أولا	منطقي	إذا تم التعيين على true ، فسيتم تحديد العنصر الأول في قائمة الإكمال التلقائي تلقائيًا، وتجاهل إذا كان التغيير عند التحديد قيد التشغيل	خطأ شنيع
ChangeWhenSelect	منطقي	يسمح بتغيير قيمة الإدخال باستخدام مفاتيح الأسهم في قائمة الإكمال التلقائي	حقيقي
HighlightMatches	منطقي	يحدد هذا الخيار التفاف العلامة <strong> للمطابقات في نتائج الإكمال التلقائي	خطأ شنيع
تجاهلKeyCode	صفيف	مصفوفة تحتوي على رموز مفاتيح يمكن تجاهلها، بشكل افتراضي: 9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145	[]
customLabel	شارع	اسم خاصية الكائن الذي سيتم استخدامه كتسمية	خطأ شنيع
customValue	شارع	اسم خاصية الكائن التي سيتم استخدامها كقيمة	خطأ شنيع
onBeforeSend	وظيفة	يتم تشغيل هذه الوظيفة قبل طلب اياكس	$.noop
onBeforeShow	وظيفة	يتم تشغيل هذه الوظيفة عندما تكون القائمة جاهزة للعرض	$.noop
onEmpty	وظيفة	إذا كانت قائمة البيانات فارغة، قم بتشغيل هذه الوظيفة	$.noop
onItem	وظيفة	يتم تشغيل هذه الوظيفة عندما يتم إعداد كل عنصر للعرض	$.noop
onListOpen	وظيفة	يتم تشغيل هذه الوظيفة عند عرض القائمة	$.noop
onListClose	وظيفة	يتم تشغيل هذه الوظيفة عندما تكون القائمة مخفية	$.noop
onBeforeLaunch	وظيفة	تم تشغيل الحدث قبل الطلب الجديد (بما في ذلك ذاكرة التخزين المؤقت المحلية)	$.noop
نموذج	شارع	قالب مخصص لعناصر القائمة. على سبيل المثال: <span>{{ label }} is {{ customPropertyFromSource }}</span> . يتم إلحاق القالب بـ .autocompleter-item .	خطأ شنيع
إزاحة	شارع	إزاحة استجابة المصدر، على سبيل المثال: "response.items.posts" . @ مهجور استخدم format بدلاً من ذلك	خطأ شنيع
شكل	وظيفة	قم بتنسيق حمولة الاستجابة لإرجاع بيانات المصدر	باطل
يجمع	وظيفة	إرجاع كائن يقوم بتوسيع بيانات اياكس. مفيد إذا كنت تريد تمرير بعض خيارات الخادم الإضافية	$.noop
أتصل مرة أخرى	وظيفة	حدد وظيفة رد الاتصال القيمة. الوسائط: value ، index ، object	$.noop

طُرق

تغيير الخيار بعد تحديد البرنامج المساعد

 $ ( "#input" ) . autocompleter ( "option" , data ) ;

على سبيل المثال:

 $ ( "#input" ) . autocompleter ( "option" , {
  limit : 5 ,
  template :
    '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}' ,
} ) ; 

فتح القائمة

 $ ( "#input" ) . autocompleter ( "open" ) ; 

إغلاق القائمة

 $ ( "#input" ) . autocompleter ( "close" ) ; 

تدمير البرنامج المساعد

 $ ( "#input" ) . autocompleter ( "destroy" ) ; 

مسح كافة ذاكرة التخزين المؤقت

 $ . autocompleter ( "clearCache" ) ; 

تعيين الإعدادات الافتراضية

 $ . autocompleter ( "defaults" , {
  customClass : "myClassForAutocompleter" ,
} ) ; 

مثال آخر

الإكمال التلقائي لإدخال الاسم الأول مع التخزين المؤقت وتمييز المطابقة وحد 5 نتائج. تعتمد الاستجابة عن بعد على الجنس:

ترميز النموذج

 < fieldset >
  < label > Male </ label >
  < input type =" radio " name =" gender " value =" male " checked =" checked " />

  < label > Female </ label >
  < input type =" radio " name =" gender " value =" female " />

  < label > Other </ label >
  < input type =" radio " name =" gender " value =" other " />

  < label > First Name </ label >
  < input type =" text " name =" firstname " id =" firstname " />
</ fieldset > 

شفرة

 $ ( function ( ) {
  $ ( "#firstname" ) . autocompleter ( {
    source : "https://EXAMPLE_API_ENDPOINT.com/api/search/name" ,
    limit : 5 ,
    cache : true ,
    combine : function ( params ) {
      var gender = $ ( "input:radio[name=gender]:checked" ) . val ( ) ;

      // passing params to match endpoint
      return {
        q : params . query ,
        count : params . limit ,
        gender : gender ,
      } ;
    } ,
    format : function ( data ) {
      // map response data to match autocompleter
      return data . entries . map ( function ( item ) {
        return {
          label : item . name ,
          value : item . slug ,
        } ;
      } ) ;
    } ,
    callback : function ( value , index , object ) {
      console . log (
        "Value " + value + " are selected (with index " + index + ")."
      ) ;
      console . log ( object ) ;
    } ,
  } ) ;
} ) ; 

العلامات

div (node) -> ul (list) -> li (item) .

 < div class =" autocompleter " id =" autocompleter-1 " >
  < ul class =" autocompleter-list " >
    < li class =" autocompleter-item " > First </ li >
    <!-- ... -->
    < li class =" autocompleter-item " > Last </ li >
  </ ul >
</ div >