Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
216 lines (202 sloc) 7.75 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bang Bang</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="http://willywos.github.com/bangbang/jquery.bangbang.css" rel="stylesheet">
<script src="http://willywos.github.com/bangbang/jquery.bangbang.js"></script>
</head>
<body>
<div class="container">
<div class="content">
<div class="row">
<div class="span12">
<br><br>
<blockquote>
<p class="lead">Bang Bang</p>
<em>jQuery plugin to handle multiple tagged input.</em>
</blockquote>
</div>
</div>
<div class="row">
<div class="span12">
<br><br>
<form accept-charset="UTF-8" class="form-search" id="form" method="get">
<div class="alert alert-block">
<a href="#" class="close" data-dismiss="alert">×</a>
<h4>Instructions</h4>
<br>
Start by typing <strong>!</strong> Then, use your arrow keys to select a command to search by from the list or type the full command and hit space. <br> For more help, click the Advanced Search Help link below.
</div>
<div class="bang_control">
<input autocomplete="off" class="none" id="search_txt" name="search" type="search" value="">
</div>
<br><br>
<input type="button" class="pull-right btn btn-primary" id="search_button" value="Searchy"/>
<br><br>
<a href="" class="help_link">Advanced Search Help</a>
<br><br>
<div class="span11 help" style="display:none">
<div class="well">
<table class="table">
<thead>
<tr>
<th>Search by</th>
<th>Command</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>First name</td>
<td>!fn</td>
<td>!fn John</td>
</tr>
<tr>
<td>Last name</td>
<td>!ln</td>
<td>!ln Smith</td>
</tr>
<tr>
<td>User with Email</td>
<td>!email</td>
<td>!email jsmith@email.com</td>
</tr>
<tr>
<td>User with Username</td>
<td>!username</td>
<td>!username jsmith</td>
</tr>
<tr>
<td>Address</td>
<td>!addr</td>
<td>!addr 1234 2nd ST.</td>
</tr>
<tr>
<td>Address Two</td>
<td>!addr2</td>
<td>!addr2 Apt. 1234.</td>
</tr>
<tr>
<td>City</td>
<td>!city</td>
<td>!city Urbandale</td>
</tr>
<tr>
<td>State</td>
<td>!state</td>
<td>!state IA</td>
</tr>
<tr>
<td>Zip</td>
<td>!zip</td>
<td>!zip 50169</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="span12">
<h4>What is this?</h4>
Bang Bang is a way to group inputs on a single input field.
It's similar to how tags work with a few differences. It was
originally written for our advanced search functionality.
The goal was to create a quick and simple way to provide our support team with
a way to search for information without having to click
a bunch of buttons, and checkboxes to filter their search
criteria.
<br><br>
<h4>Why is it called Bang Bang?</h4>
Because of the exclamation point ! is what triggers the
commands.
<br><br>
<h4>Does it work with bootstrap?</h4>
Yes, it should work with version 2.2.1
<br><br>
<h4>How does it work?</h4>
When you type ! followed by the command, a new text input
field is added to the form with the name of the command. It
doesn't look like it from the UI but it happens behind the
scenes.
You can call the jquery plugin with a list of tags like
this:<br><br>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;Bang Bang&lt;/title&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
&lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;http://getbootstrap.com/2.3.2/assets/css/bootstrap.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;link href=&quot;http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;link href=&quot;http://willywos.github.com/bangbang/jquery.bangbang.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;http://willywos.github.com/bangbang/jquery.bangbang.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form accept-charset=&quot;UTF-8&quot; class=&quot;form-search&quot; id=&quot;form&quot; method=&quot;get&quot;&gt;
&lt;div class=&quot;bang_control&quot;&gt;
&lt;input autocomplete=&quot;off&quot; class=&quot;none&quot; id=&quot;search_txt&quot; name=&quot;search&quot; type=&quot;search&quot; value=&quot;&quot;&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
var tags = [
&quot;fn&quot;,
&quot;ln&quot;,
&quot;email&quot;,
&quot;username&quot;,
&quot;addr&quot;,
&quot;addr2&quot;,
&quot;city&quot;,
&quot;state&quot;,
&quot;zip&quot;
];
$(&quot;#search_txt&quot;).bang({ tags: tags });
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".help_link").click(function(e) {
e.preventDefault();
$(".help").slideToggle();
});
var tags = [
"fn",
"ln",
"email",
"username",
"addr",
"addr2",
"city",
"state",
"zip"
];
$("#search_txt").bang({ tags: tags });
$("#search_button").click(function(e) {
e.preventDefault();
$("#form").submit();
});
});
</script>
</body>
</html>