Nikku Jquery Tagit Save Abandoned
JQuery plugin for auto completion of tags
Project README
jQuery Tagit
jQuery plugin for tag input fields, e.g. the ones used by Stackoverflow.
CSS markup is based on bootstrap and built with Less support.
Inspired by Tag-it!.
Features
- Autocompletion
- Mouse and keyboard handling
- Visual integration into bootstrapped form environments
Requirements
Usage
Include requirements and plugin in the header of your website
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tagit.js"></script>
<style type="text/css">
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.min.css');
@import url('tagit.css');
</style>
</head>
<!-- ... -->
Create a ul element in a bootstrap like form environment:
<form action="#">
<fieldset>
<div class="clearfix">
<label>Experience in</label>
<div class="input">
<ul id="languages-select" class="fake-input" tabindex="1">
<li>Java</li>
</ul>
</div>
</div>
</fieldset>
</form>
Control the ul element using jQuery:
<script type="text/javascript">
$(function() {
var tags = ["Java", "Javascript", "Python", "C",
"C++", "Ruby", "CSS", "HTML", "C#",
"Visual Basic", "Prolog", "Smalltalk",
"Scala", "Haskel", "Bash"];
$("#languages-select").tagit({
tags: tags,
field: "language"
});
});
</script>
See the full example.
Open Source Agenda is not affiliated with "Nikku Jquery Tagit" Project. README Source: nikku/jquery-tagit
Open Source Agenda Badge
