هذا هو مكون إضافي لـ JQuery لعلامات الإدخال مع اقتراح الإكمال التلقائي.
$ ( 'input' ) . amsifySuggestags ( ) ;
npm i suggestags
للتهيئة البسيطة
< input type =" text " class =" form-control " name =" country " />
$ ( 'input[name="country"]' ) . amsifySuggestags ( ) ;
إذا كان الإدخال يحتوي بالفعل على قيمة مفصولة بفاصلة، فسيتم تحميل العلامات بشكل افتراضي
< input type =" text " class =" form-control " name =" country " value =" India,UAE,Nepal " />
$ ( 'input[name="country"]' ) . amsifySuggestags ( ) ;
يمكن تمرير قائمة القيم للحصول على الاقتراحات.
< input type =" text " class =" form-control " name =" country " />
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ]
} ) ;
قم بإدراج ما إذا كان من الممكن أيضًا تعيين الكائنات بحيث تحتوي على زوج علامة/قيمة.
< input type =" text " class =" form-control " name =" color " />
$ ( 'input[name="color"]' ) . amsifySuggestags ( {
suggestions : [
{ tag : 'Black' , value : 1 } ,
{ tag : 'White' , value : 2 } ,
{ tag : 'Red' , value : 3 } ,
{ tag : 'Blue' , value : 4 } ,
{ tag : 'Green' , value : 5 } ,
{ tag : 'Orange' , value : 6 }
]
} ) ;
سوف يقوم الإدخال بتخزين value
مفصولة بفاصلة مثل هذا
< input type =" text " class =" form-control " name =" 1,2,3,4,5,6 " />
ملاحظة: أثناء تعيين القيمة الافتراضية للإدخال، قم بتعيين القيمة الفعلية مفصولة بفواصل وليس أسماء العلامات.
يمكننا أيضًا الحصول على اقتراحات من خلال Ajax
< input type =" text " class =" form-control " name =" country " />
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestionsAction : {
url : 'http://www.site.com/suggestions'
}
} ) ;
سيكون نوع طريقة Ajax هو GET ، وبنية بيانات الطلب التي ستتلقاها هي
{
"existing" : [ " one " , " two " , " three " ],
"term" : " something "
}
الموجود عبارة عن مجموعة من العلامات المحملة بالفعل والمصطلح هو السلسلة التي تحاول البحث عنها.
يجب أن تحتوي استجابة النجاح على الأقل على مفتاح الاقتراحات ويجب أن تكون قيمتها من النوع list/array:
{
"suggestions" : [ " four " , " five " , " six " ]
}
يمكنك أيضًا إضافة هذه الإعدادات وعمليات الاسترجاعات إلى هذا الخيار
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestionsAction : {
timeout : - 1 ,
minChars : 2 ,
minChange : - 1 ,
delay : 100 ,
type : 'GET' ,
url : 'http://www.site.com/suggestions' ,
dataType : null ,
beforeSend : function ( ) {
console . info ( 'beforeSend' ) ;
} ,
success : function ( data ) {
console . info ( 'success' ) ;
} ,
error : function ( ) {
console . info ( 'error' ) ;
} ,
complete : function ( data ) {
console . info ( 'complete' ) ;
}
}
} ) ;
timeout - It is for cancelling the request after given specific seconds, default is -1
minChars - It is the minimum chars types before the first ajax hit, default is 2
minChange - It recall the ajax based on the minimum percentage chars changed compared to the string passed in last ajax call, default is -1
delay - It is the milliseconds time delay to call ajax or whitelist suggestions on text entered and wait, defult is 100
type - It is type of method we pass, default is GET
dataType - It is dateType of request data being passed, default is null
ملاحظة : لا يؤدي النجاح وإكمال عمليات الاسترجاعات إلى تجاوز عمليات رد الاتصال الأصلية مباشرةً، بل يتم استدعاؤها بعد تنفيذ عمليات الاسترجاعات الأصلية.
لا يسمح هذا الخيار ببساطة بأي مدخلات أخرى غير الاقتراحات.
< input type =" text " class =" form-control " name =" country " />
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true
} ) ;
< input type =" text " class =" form-control " name =" country " />
لتعيين الفئة الافتراضية للعلامات، يمكنك تمرير هذا الإعداد
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
defaultTagClass : 'badge'
} ) ;
يمكننا تمرير قائمة الفئات أو الألوان أو الخلفيات من خلال الإعدادات
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
classes : [ 'bg-primary' , 'bg-success' , 'bg-danger' , 'bg-warning' , 'bg-info' ]
} ) ;
سيتم تطبيق كل فئة على كل علامة اقتراح من خلال المفاتيح المقابلة لها. يمكننا أيضًا تمرير الخلفيات والألوان.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
backgrounds : [ 'blue' , 'green' , 'red' , 'orange' , '#424242' ] ,
colors : [ 'white' , 'black' , 'white' , 'black' , 'white' ] ,
} ) ;
يمكننا أيضًا تعيين الفئة واللون والخلفية لكل عنصر اقتراح إذا كانت عناصر الاقتراح كائنًا.
$ ( 'input[name="color"]' ) . amsifySuggestags ( {
suggestions : [
{ tag : 'Black' , value : 1 , background : 'black' , color : 'white' } ,
{ tag : 'White' , value : 2 , background : 'white' , color : 'black' } ,
{ tag : 'Red' , value : 3 , background : 'red' , color : 'white' } ,
{ tag : 'Blue' , value : 4 , background : 'blue' , color : 'white' } ,
{ tag : 'Green' , value : 5 , background : 'green' , color : 'white' } ,
{ tag : 'Orange' , value : 6 , background : 'orange' , color : 'white' }
]
} ) ;
يمكن أيضًا تمرير نفس الاقتراحات في استجابة ajax لتشغيل هذه الأنماط
{
"suggestions" : [
{
"tag" : " Black " ,
"value" : 1 ,
"background" : " black " ,
"color" : " white "
},
{
"tag" : " White " ,
"value" : 2 ,
"background" : " white " ,
"color" : " black "
}
]
}
يمكننا تعيين عمليات الاسترجاعات على إضافة/إزالة عناصر العلامة
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
afterAdd : function ( value ) {
console . info ( value ) ; // Parameter will be value
} ,
afterRemove : function ( value ) {
console . info ( value ) ; // Parameter will be value
} ,
} ) ;
أو يمكننا أيضًا الاشتراك لإضافة/إزالة الأحداث
$ ( 'input[name="country"]' ) . on ( 'suggestags.add' , function ( e ) {
// Do something after adding tag
} ) ;
$ ( 'input[name="country"]' ) . on ( 'suggestags.change' , function ( e ) {
// Do something while add/remove tag
} ) ;
$ ( 'input[name="country"]' ) . on ( 'suggestags.remove' , function ( e ) {
// Do something before removing tag
} ) ;
يمكننا أيضًا تعيين حد للعلامات
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
tagLimit : 5
} ) ;
لتحديث القيم، يمكنك استخدام
var params = {
// Make sure you have parameters which used during first execution
} ;
$ ( 'input[name="country"]' ) . amsifySuggestags ( params , 'refresh' ) ;
لتدمير المثيل، يمكنك القيام به
$ ( 'input[name="country"]' ) . amsifySuggestags ( { } , 'destroy' ) ;
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
selectOnHover : false
} ) ;
لن يتم تحديد قيمة العلامة المقترحة عند تحريك الماوس فوق عنصر الاقتراح. بشكل افتراضي القيمة true
سيُظهر هذا رسالة عندما لا يظهر أي عنصر مقترح مطابق للإدخال.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
noSuggestionMsg : 'Enter to generate new tag'
} ) ;
سيُظهر هذا كل عنصر الاقتراح عند التركيز على الإدخال. افتراضيا هذا false
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showAllSuggestions : true
} ) ;
سيؤدي هذا إلى الاحتفاظ بعنصر الاقتراح الأخير في حقل نص الإدخال، حتى عند الابتعاد عن قائمة الاقتراحات. افتراضيا هذا true
. يكون ذلك مفيدًا عندما يتم تعيين showAllSuggestions
على true
وترغب في إخفاء قائمة الاقتراحات عند النقر بعيدًا عن حقل نص الإدخال.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
keepLastOnHoverTag : false
} ) ;
افتراضيًا، تتم طباعة قيمة الإدخال وأسماء علاماتها في وحدة التحكم. يمكنك ضبطه على خطأ حتى لا تتم الطباعة في وحدة التحكم.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
printValues : false
} ) ;
هذا الإعداد مخصص لإخفاء علامات المتابعة عندما يكون التركيز خارج قسم العلامات وإظهار الرقم + بدلاً من ذلك. بشكل افتراضي هو 0، يمكنك تعيين الرقم لإخفاء العلامات بعد الرقم المحدد عندما يكون التركيز خارجًا.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showPlusAfter : 0
} ) ;
يمكن تمرير وظيفة رد الاتصال لمطابقة النص الذي أدخله المستخدم مع عنصر الاقتراح لعرضه في قائمة الاقتراحات للمطابقة المخصصة.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
suggestMatch : function ( suggestionItem , value ) {
return ~ suggestionItem . toString ( ) . toLowerCase ( ) . indexOf ( value . toString ( ) . toLowerCase ( ) ) ;
}
} ) ;
سيتلقى رد الاتصال هذا معلمتين، قيمة عنصر الاقتراح وقيمة النص التي أدخلها المستخدم. يمكن استخدام كلا المعلمتين لإجراء مطابقة مخصصة وإرجاع قيمة غير صفرية للسماح لهذا الاقتراح بالظهور في قائمة الاقتراحات.
يعد هذا أيضًا أحد الأساليب التي يمكنك من خلالها استخدام هذا البرنامج المساعد.
يمكنك التهيئة عن طريق إنشاء مثيل لـ AmsifySuggestags
وتمرير المحدد إليه.
amsifySuggestags = new AmsifySuggestags ( $ ( 'input[name="country"]' ) ) ;
amsifySuggestags . _init ( ) ;
تحتاج إلى ضبطه قبل التهيئة ويمكنك استخدام جميع خيارات الإعداد الموضحة في الطريقة السابقة.
amsifySuggestags . _settings ( {
suggestions : [ 'Black' , 'White' , 'Red' , 'Blue' , 'Green' , 'Orange' ]
} )
amsifySuggestags . _init ( ) ;
يمكنك استدعاء هذه الطرق لإضافة/إزالة العلامة باستخدام مثيل AmsifySuggestags
amsifySuggestags . addTag ( 'Purple' ) ;
amsifySuggestags . removeTag ( 'Red' ) ;
يمكنك استدعاء هذه الأساليب للتحديث/التدمير
amsifySuggestags . refresh ( ) ;
amsifySuggestags . destroy ( ) ;
ملاحظة : يعمل هذا الأسلوب فقط مع عنصر محدد واحد وليس مع عناصر متعددة لها نفس المحدد.
لجعله يعمل مع محدد يحتوي على عناصر متعددة، يمكنك القيام بشيء مثل هذا:
$ ( '.tags-input' ) . each ( function ( ) {
amsifySuggestags = new AmsifySuggestags ( $ ( this ) ) ;
amsifySuggestags . _init ( ) ;
} ) ;