表单/表格

带自动提示功能的jQuery标签输入插件

创客主机

带自动提示功能的jQuery标签输入插件-创客云
这是一款带自动提示功能的 jQuery 标签输入插件。该插件可以指定一组预定义的标签,在输入某个关键字之后,便会提示出所有的可用标签供选择,非常方便。

使用方法

在页面中引入 amsify.suggestags.css 和 amsify.suggestags.js 文件。

也想出现在这里?联系我们
宝塔

HTML 结构

页面布局的 HTML 结构如下。

  1. <input type="text" class="form-control" name="country"/>

初始化插件

  1. $('input[name="country"]').amsifySuggestags();

通过 suggestions 参数来设置提示功能。

  1. $('input[name="country"]').amsifySuggestags({
  2.     suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh']
  3. });

白名单功能:除了指定的输入框之外,其它的输入框不具备建议提示功能。

  1. $('input[name="country"]').amsifySuggestags({
  2.   suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh'],
  3.   whiteList: true
  4. });

自定义样式。

  1. <input type="text" class="form-control" name="country"/>
  2.  
  3. $('input[name="country"]').amsifySuggestags({
  4.   suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh'],
  5.   whiteList: true,
  6.   classes: ['bg-primary', 'bg-success', 'bg-danger', 'bg-warning', 'bg-info']
  7. });
  8.  
  9. // 设置背景色
  10. $('input[name="country"]').amsifySuggestags({
  11.   suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh'],
  12.   whiteList: true,
  13.   backgrounds: ['blue', 'green', 'red', 'orange', '#424242'],
  14.   colors: ['white', 'black', 'white', 'black', 'white'],
  15. });

回调方法。

  1. $('input[name="country"]').amsifySuggestags({
  2.   afterAdd : function(value) {
  3.     console.info(value); // Parameter will be value
  4.   },
  5.   afterRemove : function(value) {
  6.     console.info(value); // Parameter will be value
  7.   },
  8. });

监听添加和移除标签事件。

  1. $('input[name="country"]').on('suggestags.add', function(e){
  2.   // Do something while adding tag
  3. });
  4. $('input[name="country"]').on('suggestags.remove', function(e){
  5.   // Do something while removing tag
  6. });

限制输入标签的数量。

  1. $('input[name="country"]').amsifySuggestags({
  2.   tagLimit: 5
  3. });

刷新和销毁插件。

  1. var params = {
  2.     // Make sure you have parameters which used during first execution
  3. };
  4. $('input[name="country"]').amsifySuggestags(params, 'refresh');
  5. $('input[name="country"]').amsifySuggestags({}, 'destroy');

Github 网址:https://github.com/amsify42/jquery.amsify.suggestags

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!