.. | ||
bootstrap-tagsinput.css | ||
bootstrap-tagsinput.js | ||
LICENSE | ||
README | ||
README.md |
<title>bootstrap-tagsinput/README.md at master · TimSchlechter/bootstrap-tagsinput · GitHub</title>
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-114.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-144.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144.png">
<meta property="fb:app_id" content="1401488693436528">
<meta content="@github" name="twitter:site" /><meta content="summary" name="twitter:card" /><meta content="TimSchlechter/bootstrap-tagsinput" name="twitter:title" /><meta content="bootstrap-tagsinput - jQuery tags input plugin based on Twitter Bootstrap." name="twitter:description" /><meta content="https://avatars1.githubusercontent.com/u/2721613?v=3&s=400" name="twitter:image:src" />
<meta name="browser-stats-url" content="/_stats">
<link rel="assets" href="https://assets-cdn.github.com/">
<link rel="conduit-xhr" href="https://ghconduit.com:25035">
<meta name="pjax-timeout" content="1000">
<meta name="msapplication-TileImage" content="/windows-tile.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="selected-link" value="repo_source" data-pjax-transient>
<meta name="google-analytics" content="UA-3769691-2">
<meta content="collector.githubapp.com" name="octolytics-host" /><meta content="collector-cdn.github.com" name="octolytics-script-host" /><meta content="github" name="octolytics-app-id" /><meta content="05C412F3:5EFA:620CC:54968B9C" name="octolytics-dimension-request_id" />
<meta content="Rails, view, blob#show" name="analytics-event" />
<link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
<meta content="authenticity_token" name="csrf-param" />
<link href="https://assets-cdn.github.com/assets/github-9bcf5def7eb44e2a101b20aaecf3707f4b0a10ab8f4d6eebec29371f821c4b29.css" media="all" rel="stylesheet" type="text/css" />
<link href="https://assets-cdn.github.com/assets/github2-47bc67324d463c7cecb5ee4c009628c91db85b0e9288a9e663f2d06ff9e03088.css" media="all" rel="stylesheet" type="text/css" />
<meta http-equiv="x-pjax-version" content="cffc32e08a29062b908cc3ddb47285af">
</head>
Skip to content
<div class="header header-logged-out" role="banner">
<a class="header-logo-wordmark" href="https://github.com/" ga-data-click="(Logged out) Header, go to homepage, icon:logo-wordmark">
<span class="mega-octicon octicon-logo-github"></span>
</a>
<div class="header-actions" role="navigation">
<a class="button primary" href="/join" data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up">Sign up</a>
<a class="button" href="/login?return_to=%2FTimSchlechter%2Fbootstrap-tagsinput%2Fblob%2Fmaster%2FREADME.md" data-ga-click="(Logged out) Header, clicked Sign in, text:sign-in">Sign in</a>
</div>
<div class="site-search repo-scope js-site-search" role="search">
<form accept-charset="UTF-8" action="/TimSchlechter/bootstrap-tagsinput/search" class="js-site-search-form" data-global-search-url="/search" data-repo-search-url="/TimSchlechter/bootstrap-tagsinput/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<ul class="header-nav left" role="navigation">
<li class="header-nav-item">
<a class="header-nav-link" href="/explore" data-ga-click="(Logged out) Header, go to explore, text:explore">Explore</a>
</li>
<li class="header-nav-item">
<a class="header-nav-link" href="/features" data-ga-click="(Logged out) Header, go to features, text:features">Features</a>
</li>
<li class="header-nav-item">
<a class="header-nav-link" href="https://enterprise.github.com/" data-ga-click="(Logged out) Header, go to enterprise, text:enterprise">Enterprise</a>
</li>
<li class="header-nav-item">
<a class="header-nav-link" href="/blog" data-ga-click="(Logged out) Header, go to blog, text:blog">Blog</a>
</li>
</ul>
<div id="start-of-content" class="accessibility-aid"></div>
<div class="site" itemscope itemtype="http://schema.org/WebPage">
<div id="js-flash-container">
</div>
<div class="pagehead repohead instapaper_ignore readability-menu">
<div class="container">
-
Star
<a class="social-count js-social-count" href="/TimSchlechter/bootstrap-tagsinput/stargazers"> 755 </a>
<li>
<a href="/login?return_to=%2FTimSchlechter%2Fbootstrap-tagsinput"
class="minibutton with-count js-toggler-target fork-button tooltipped tooltipped-n"
aria-label="You must be signed in to fork a repository" rel="nofollow">
<span class="octicon octicon-repo-forked"></span>
Fork
</a>
<a href="/TimSchlechter/bootstrap-tagsinput/network" class="social-count">
307
</a>
</li>
<h1 itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="entry-title public">
<span class="mega-octicon octicon-repo"></span>
<span class="author"><a href="/TimSchlechter" class="url fn" itemprop="url" rel="author"><span itemprop="title">TimSchlechter</span></a></span><!--
--><span class="path-divider">/</span><!--
--><strong><a href="/TimSchlechter/bootstrap-tagsinput" class="js-current-repository" data-pjax="#js-repo-pjax-container">bootstrap-tagsinput</a></strong>
<span class="page-context-loader">
<img alt="" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />
</span>
</h1>
</div><!-- /.container -->
</div><!-- /.repohead -->
<div class="container">
<div class="repository-with-sidebar repo-container new-discussion-timeline ">
<div class="repository-sidebar clearfix">
<li class="tooltipped tooltipped-w" aria-label="Issues">
<a href="/TimSchlechter/bootstrap-tagsinput/issues" aria-label="Issues" class="js-selected-navigation-item sunken-menu-item" data-hotkey="g i" data-selected-links="repo_issues repo_labels repo_milestones /TimSchlechter/bootstrap-tagsinput/issues">
<span class="octicon octicon-issue-opened"></span> <span class="full-word">Issues</span>
<span class="js-issue-replace-counter"></span>
<img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />
<li class="tooltipped tooltipped-w" aria-label="Pull Requests">
<a href="/TimSchlechter/bootstrap-tagsinput/pulls" aria-label="Pull Requests" class="js-selected-navigation-item sunken-menu-item" data-hotkey="g p" data-selected-links="repo_pulls /TimSchlechter/bootstrap-tagsinput/pulls">
<span class="octicon octicon-git-pull-request"></span> <span class="full-word">Pull Requests</span>
<span class="js-pull-replace-counter"></span>
<img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />
<li class="tooltipped tooltipped-w" aria-label="Pulse">
<a href="/TimSchlechter/bootstrap-tagsinput/pulse" aria-label="Pulse" class="js-selected-navigation-item sunken-menu-item" data-selected-links="pulse /TimSchlechter/bootstrap-tagsinput/pulse">
<span class="octicon octicon-pulse"></span> <span class="full-word">Pulse</span>
<img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />
<li class="tooltipped tooltipped-w" aria-label="Graphs">
<a href="/TimSchlechter/bootstrap-tagsinput/graphs" aria-label="Graphs" class="js-selected-navigation-item sunken-menu-item" data-selected-links="repo_graphs repo_contributors /TimSchlechter/bootstrap-tagsinput/graphs">
<span class="octicon octicon-graph"></span> <span class="full-word">Graphs</span>
<img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />
<div class="only-with-full-nav">
HTTPS clone URL
Subversion checkout URL
You can clone with HTTPS or Subversion.
<a href="/TimSchlechter/bootstrap-tagsinput/archive/master.zip"
class="minibutton sidebar-button"
aria-label="Download the contents of TimSchlechter/bootstrap-tagsinput as a zip file"
title="Download the contents of TimSchlechter/bootstrap-tagsinput as a zip file"
rel="nofollow">
<span class="octicon octicon-cloud-download"></span>
Download ZIP
</a>
</div>
</div><!-- /.repository-sidebar -->
<div id="js-repo-pjax-container" class="repository-content context-loader-container" data-pjax-container>
<div class="participation">
<p class="quickstat">
<a href="#blob_contributors_box" rel="facebox">
<strong>1</strong>
contributor
</a>
</p>
</div>
<div id="blob_contributors_box" style="display:none">
<h2 class="facebox-header">Users who have contributed to this file</h2>
<ul class="facebox-user-list">
<li class="facebox-user-list-item">
<img alt="Tim Schlechter" data-user="2721613" height="24" src="https://avatars3.githubusercontent.com/u/2721613?v=3&s=48" width="24" />
<a href="/TimSchlechter">TimSchlechter</a>
</li>
</ul>
</div>
<a class="octicon-button disabled tooltipped tooltipped-w" href="#"
aria-label="You must be signed in to make or propose changes"><span class="octicon octicon-pencil"></span></a>
<a class="octicon-button danger disabled tooltipped tooltipped-w" href="#"
aria-label="You must be signed in to make or propose changes">
<span class="octicon octicon-trashcan"></span>
</a>
</div><!-- /.actions -->
</div>
Bootstrap Tags Input
Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags.
Usage
Examples can be found here.
Features
- Objects as tags
- True multi value
- Typeahead
- Designed for Bootstrap 2.3.2 and 3
Objects as tags
Not just support for using strings! This means you can use different values
for a tag's label and value. Each tag also holds a reference to the object
by which it was created, so by calling tagsinput('items')
an
array of the original items is returned.
True multi value support
Other implementations just concatenate the values to a comma separated string.
This results in val()
returning just this string, and when
submitting the form, only one big, concatenated value is sent in the request.
Bootstrap Tags Input provides true multivalue support. Just use a
<select multiple />
as your input element, and
val()
will return an array of the tag values. When submitting the
form, an array of values will be sent with the request.
Typeahead support
Integrates with Twitter Bootstraps' 2.3.2 typeahead, or use custom typeahead when using Bootstrap 3.
Development
Install dependencies:
npm install bower install
Test:
grunt test
Build:
grunt build
History
- 0.4
- 0.3.13
- #5: Trigger events on original input/select
- Loads of fixes merged with help of @janvt, @rlidwka and @kuraga: thanks for helping me out!
- 0.3.9
- 0.3.8
- 0.3.7
- 0.3.6
- 0.3.5
- 0.3.4
License
This project is licensed under MIT.
</div>
</div><!-- /.repo-container -->
<div class="modal-backdrop"></div>
</div><!-- /.container -->
</div><!-- /.wrapper -->
<div class="container">
</ul>
<a href="/" aria-label="Homepage">
<span class="mega-octicon octicon-mark-github" title="GitHub"></span>
</a>
<ul class="site-footer-links">
<li>© 2014 <span title="0.02664s from github-fe122-cp1-prd.iad.github.net">GitHub</span>, Inc.</li>
<li><a href="/site/terms">Terms</a></li>
<li><a href="/site/privacy">Privacy</a></li>
<li><a href="/security">Security</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<div class="fullscreen-overlay js-fullscreen-overlay" id="fullscreen_overlay">
<div id="ajax-error-message" class="flash flash-error">
<span class="octicon octicon-alert"></span>
<a href="#" class="octicon octicon-x flash-close js-ajax-error-dismiss" aria-label="Dismiss error"></a>
Something went wrong with that request. Please try again.
</div>
<script crossorigin="anonymous" src="https://assets-cdn.github.com/assets/frameworks-fc447938e306b7b2c26a33cfee9dfda9052aeb1aa6ad84b72f1b35fd008efe9e.js" type="text/javascript"></script>
<script async="async" crossorigin="anonymous" src="https://assets-cdn.github.com/assets/github-56c56f7fe2ed90ca50b9eefebccd56f3b9729a85d7ba17f0f9c9ebd02f20a7e3.js" type="text/javascript"></script>
</html>