Press "Enter" to skip to content

JQuery Plugin For Input Tags With Auto-complete Suggestion | Jquery Suggestags

Jquery Suggestags is a simple jQuery tag/input code plugin that converts regular input tags with autocomplete suggestions.

How to make use of it:

1. Download the most recent release and embody the next JavaScript and CSS files in your web page:

<!-- jQuery CDN  -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Amsify Plugin -->
<link rel="stylesheet" href="/css/amsify.suggestags.css">
<script src="/js/jquery.amsify.suggestags.js"></script>

2. Create a standard input field on the web page and specify the pre-selected tags within the value attribute (optionally available).

<input type="text" name="color" value="Orange,Black">

3. Attach the plugin to the input field and specify an array of auto strategies.

$('input[name="color"]').amsifySuggestags({
  type : 'amsify',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange']
});
// or
$('input[name="color"]').amsifySuggestags({
  type : 'amsify',
  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}
  ]
});

4. Use a third framework to type the tagging system.

// requires the latest Bootstrap 4 or Bootstrap 3 framework
$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap'
});

// requires the latest Materialize framework
$('input[name="color"]').amsifySuggestags({
  type : 'materialize'
});

5. Specify the utmost quantity tags allowed to enter.

$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'],
  tagLimit: 5
});

6. Customize the looks of the chosen tags.

$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'],
  defaultTagClass: '',
  classes: [],
  backgrounds: [],
  colors: []
});

7. Sometimes you would possibly want to dam customized tags that aren’t listed within the auto strategies.

$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'],
  whiteList: true
});

8. Decide whether or not to pick objects on hover.

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

9. Available callback function.

$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'],
  afterAdd: function(value) {
    // after add
  },
  afterRemove: function(value) {
    // after remove
  },
});

10. Get strategies by way of AJAX.

$('input[name="color"]').amsifySuggestags({
  suggestionsAction : {
    timeout: -1, 
    minChars:2, 
    minChange:-1,
    delay: 100,
    type: 'GET',
    url: '/path/to/suggestions/',
    beforeSend : function() {
      console.info('beforeSend');
    },
    success: function(data) {
      console.info('success');
    },
    error: function() {
      console.info('error');
    },
    complete: function(data) {
      console.info('complete');
    }
  }
});

11. API strategies.

// add a new tag
amsifySuggestags.addTag('Purple');

// remove a tag
amsifySuggestags.removeTag('Red');

// up<a href="#!">date</a> options
amsifySuggestags._settings({
  // options here
})

// refresh
amsifySuggestags.refresh();

// destroy
amsifySuggestags.destroy();

Simple Tagging System With Autocomplete, Jquery Suggestags Plugin/Github

Changelog:

v1.17.0 (2020-10-10)

  • Added delay choice to for ajax suggestion

v1.16.0 (2020-05-27)

  • Added customized delimiter possibility
  • dealing with the required attribute

v1.16.0 (2020-05-27)

  • Added customized delimiter possibility

v1.15.0 (2020-04-04)

  • Allows you to kind ingredient whereas exhibiting strategies

v1.14.0 (2020-01-09)

  • Using e.key if exist as an alternative of keycode
  • Added extra choices

v1.10.0 (2020-01-09)

  • Fixed merging objects for distinctive parts

v1.8.0 (2019-11-03)

  • Can set strategies as a record of objects and stuck strategies not hiding

Jquery-Suggestags-Demo


See Demo And Download

Official Website(amsify42): Click Here

This superior jQuery/javascript plugin is developed by amsify42. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *