Simple Tag Editor & Autocomplete Plugin For jQuery - Input Tag
File Size: | 8.97 KB |
---|---|
Views Total: | 5181 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Input Tag is a jQuery plugin to create a tags input which allows you to pick a tag from an autocomplete dropdown list populated with pre-defined suggestions.
Features:
- Based on jQuery UI autocomplete widget.
- Flexible data source: local data or remote source via AJAX.
- Smart delay, auto focus, and minimum character settings.
- Callback functions.
How to use it:
1. Load jQuery library, jQuery UI and the jQuery input tag plugin in the document.
<script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script> <script src="input_tag.js"></script>
2. Create a tag editor
<div id="tags"></div> <input type="text" id="tag-input"> <input type="hidden" name="country" id="country">
3. Add an array of suggestion to the tag editor.
var dataTags = [ "Azerbaijan", "Afghanistan ", "United States", "United Arab Emirates", "Algeria", "Argentina", "Albania", "Armenia", ... ];
4. Style the tag editor. You can override them yourself by adding your own styles in your own stylesheet.
.ui-autocomplete { position: absolute; z-index: 1000; cursor: pointer; padding: 0; list-style: none; background-color: #ffffff; border: 1px solid #ccc -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .ui-autocomplete > li { border-bottom: solid 1px #eee; cursor: pointer; } .ui-autocomplete > a:hover { text-decoration: none; } .ui-autocomplete > li.ui-state-focus { background-color: #f6f6f6; display: block; text-decoration: none; } .ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { text-decoration: none; } .ui-menu .ui-menu-item { padding: 5px 20px; color: #333; } .ui-menu .ui-menu-item a { color: #333; } .ui-helper-hidden-accessible { display: none; } .ui-state-focus { background: #f6f6f6; font-weight: bold; color: #333; display: block; text-decoration: none; } #tag-input { border: 1px solid transparent; outline: 0px; font-size: 15px; height: 20px; } #tags { display: none; } .tag_list { float: left; border: solid 1px #ccc; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding: 0px 10px; margin-bottom: 10px; margin-right: 5px; font-size: 13px; } .remove { cursor: pointer; }
Change log:
2017-10-13
Fixed demo & download. Thanks to Rubén Ruíz Pérez.
This awesome jQuery plugin is developed by iritec. For more Advanced Usages, please check the demo page or visit the official website.