jquery.amsify.suggestags
1.0.0
자동 완성 제안 기능이 있는 입력 태그용 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 "
} 기존 은 이미 로드된 태그의 배열이고 용어는 검색하려는 문자열입니다.
성공 응답에는 최소한 제안 키가 포함되어야 하며 해당 값은 목록/배열 유형이어야 합니다.
{
"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 콜백을 직접 재정의하지 않고 원래 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' ) ; $ ( '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
} ) ;기본적으로 입력 값과 해당 태그 이름이 콘솔에 인쇄됩니다. 콘솔에 인쇄하지 않으려면 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 ( ) ) ;
}
} ) ;이 콜백은 제안 항목 값과 사용자가 입력한 텍스트 값이라는 두 개의 매개변수를 받습니다. 두 매개변수 모두 맞춤 일치를 수행하고 0이 아닌 값을 반환하여 해당 제안이 제안 목록에 표시되도록 하는 데 사용할 수 있습니다.
이는 또한 이 플러그인을 사용할 수 있는 접근 방식 중 하나입니다.
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 ( ) ;
} ) ;
