jquery.amsify.suggestags

Jquery Suggestags

นี่คือปลั๊กอิน JQuery สำหรับแท็กอินพุตพร้อมคำแนะนำในการเติมข้อความอัตโนมัติ

 $ ( 'input' ) . amsifySuggestags ( ) ; 

การติดตั้ง npm

npm i suggestags

สารบัญ

1. เรียบง่าย
2. ค่าเริ่มต้น
3. ข้อเสนอแนะ
4. คำแนะนำผ่านอาแจ็กซ์
5. ไวท์ลิสต์
6. สไตล์ที่กำหนดเอง
7. การโทรกลับและเหตุการณ์
8. ขีดจำกัดแท็ก
9. รีเฟรชทำลาย
10. การตั้งค่าเพิ่มเติม
11. กำลังสร้างอินสแตนซ์

แท็กง่ายๆ

สำหรับการเริ่มต้นอย่างง่าย

 < 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 "
}

ที่มีอยู่ คืออาร์เรย์ของแท็กที่โหลดแล้ว และ คำ คือสตริงที่คุณกำลังพยายามค้นหา
การตอบสนองความสำเร็จอย่างน้อยควรมีคีย์ ข้อเสนอแนะ และค่าควรเป็นประเภทรายการ/อาร์เรย์:

{
	"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

หมายเหตุ : ความสำเร็จ และการเรียกกลับ โดยสมบูรณ์ ไม่ได้แทนที่การเรียกกลับ ajax ดั้งเดิมโดยตรง แต่จะถูกเรียกหลังจากดำเนินการเรียกกลับดั้งเดิม

ไวท์ลิสต์

ตัวเลือกนี้ไม่อนุญาตให้ป้อนข้อมูลอื่นนอกเหนือจากคำแนะนำ

 < 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' ) ; 

การตั้งค่าเพิ่มเติม

เลือกOnHover

 $ ( 'input[name="country"]' ) . amsifySuggestags ( {
	selectOnHover : false
} ) ;

จะไม่เลือกค่าแท็กที่แนะนำเมื่อเลื่อนเมาส์ไปที่รายการคำแนะนำ โดยค่าเริ่มต้น ค่าจะเป็น true

ไม่มีข้อเสนอแนะข่าวสาร

นี่จะแสดงข้อความเมื่อไม่มีรายการที่แนะนำปรากฏขึ้นซึ่งตรงกับอินพุต

 $ ( 'input[name="country"]' ) . amsifySuggestags ( {
	noSuggestionMsg : 'Enter to generate new tag'
} ) ;

แสดงคำแนะนำทั้งหมด

นี่จะแสดงรายการคำแนะนำทั้งหมดบนโฟกัสอินพุต โดยค่าเริ่มต้น นี่เป็น false

 $ ( 'input[name="country"]' ) . amsifySuggestags ( {
	showAllSuggestions : true
} ) ;

เก็บ LastOnHoverTag

วิธีนี้จะเก็บรายการคำแนะนำสุดท้ายไว้ในช่องข้อความที่ป้อน แม้ว่าจะย้ายออกจากรายการคำแนะนำก็ตาม โดยค่าเริ่มต้นนี้เป็น true มีประโยชน์เมื่อตั้งค่า showAllSuggestions เป็น true และคุณต้องการซ่อนรายการข้อเสนอแนะเมื่อคลิกออกจากช่องข้อความที่ป้อน

 $ ( 'input[name="country"]' ) . amsifySuggestags ( {
	keepLastOnHoverTag : false
} ) ;

ค่าพิมพ์

ตามค่าเริ่มต้น ค่าอินพุตและชื่อแท็กจะถูกพิมพ์ในคอนโซล คุณสามารถตั้งค่าเป็นเท็จไม่ให้พิมพ์ในคอนโซลได้

 $ ( 'input[name="country"]' ) . amsifySuggestags ( {
	printValues : false
} ) ;

showPlusAfter

การตั้งค่านี้ใช้สำหรับการซ่อนแท็กดำเนินการต่อเมื่อโฟกัสอยู่นอกส่วนแท็ก และแสดง หมายเลข + แทน ตามค่าเริ่มต้นคือ 0 คุณสามารถตั้งค่าตัวเลขเพื่อซ่อนแท็กหลังหมายเลขที่กำหนดเมื่อโฟกัสออกได้

 $ ( 'input[name="country"]' ) . amsifySuggestags ( {
	showPlusAfter : 0
} ) ;

แนะนำ Match

สามารถส่งฟังก์ชันโทรกลับเพื่อให้ตรงกับข้อความที่ผู้ใช้ป้อนพร้อมกับรายการคำแนะนำเพื่อแสดงในรายการคำแนะนำสำหรับการจับคู่แบบกำหนดเอง

 $ ( '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 ( ) ;
} ) ;