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
注意： success和complete回调不会直接覆盖原始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 ( ) ) ;
}
} ) ;该回调将接收两个参数，建议项值和用户输入的文本值。这两个参数都可用于进行自定义匹配并返回非零值以使该建议出现在建议列表中。
这也是您可以使用此插件的方法之一。
您可以通过创建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 ( ) ;
} ) ;
