<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="firstname">First Name</label>
<div class="col-md-4">
<input id="firstname" name="firstname" type="text" placeholder="Unknown" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="lastname">Last Name</label>
<div class="col-md-4">
<input id="lastname" name="lastname" type="text" placeholder="Unknown" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="number">Card Number</label>
<div class="col-md-4">
<input id="number" name="number" type="text" placeholder="2123200..." class="form-control input-md">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="location">Location</label>
<div class="col-md-4">
<select id="location" name="location" class="form-control">
<option value="CCL">Civic Center</option>
<option value="MBL">Mission Branch</option>
<option value="OBK">Bookmobile</option>
<option value="ADL">Adelante</option>
<option value="READS">Reads</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="level">Response Level</label>
<div class="col-md-4">
<select id="level" name="level" class="form-control">
<option value="Exclusion">Exclusion</option>
<option value="Written">Written</option>
<option value="Oral">Oral</option>
<option value="Incident">Incident</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="staff">Staff Name</label>
<div class="col-md-4">
<select id="staff" name="staff" class="form-control">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="offense">Offense</label>
<div class="col-md-4">
<div class="checkbox">
<label for="offense-0">
<input type="checkbox" name="offense" id="offense-0" value="1">
Option one
</label>
</div>
<div class="checkbox">
<label for="offense-1">
<input type="checkbox" name="offense" id="offense-1" value="2">
Option two
</label>
</div>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="details">Narrative Details</label>
<div class="col-md-4">
<textarea class="form-control" id="details" name="details">default text</textarea>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="height">Height</label>
<div class="col-md-4">
<select id="height" name="height" class="form-control">
<option value="1">Under 5'</option>
<option value="2">5'0" - 5'3"</option>
<option value="3">5'4" - 5'7"</option>
<option value="4">5'8" - 5'11"</option>
<option value="5">6'0" - 6'3"</option>
<option value="6">> 6'4"</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="frame">Frame</label>
<div class="col-md-4">
<select id="frame" name="frame" class="form-control">
<option value="1">Normal</option>
<option value="2">Thinner</option>
<option value="3">Thicker</option>
</select>
</div>
</div>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Gender</label>
<div class="col-md-4">
<label class="radio-inline" for="gender-0">
<input type="radio" name="gender" id="gender-0" value="Male" checked="checked">
Male
</label>
<label class="radio-inline" for="gender-1">
<input type="radio" name="gender" id="gender-1" value="Female">
Female
</label>
</div>
</div>
<!-- Multiple Radios -->
<div class="form-group">
<label class="col-md-4 control-label" for="ethnicity">Ethnicity</label>
<div class="col-md-4">
<div class="radio">
<label for="ethnicity-0">
<input type="radio" name="ethnicity" id="ethnicity-0" value="1" checked="checked">
White
</label>
</div>
<div class="radio">
<label for="ethnicity-1">
<input type="radio" name="ethnicity" id="ethnicity-1" value="2">
Hispanic
</label>
</div>
<div class="radio">
<label for="ethnicity-2">
<input type="radio" name="ethnicity" id="ethnicity-2" value="3">
Black
</label>
</div>
<div class="radio">
<label for="ethnicity-3">
<input type="radio" name="ethnicity" id="ethnicity-3" value="4">
Asian
</label>
</div>
<div class="radio">
<label for="ethnicity-4">
<input type="radio" name="ethnicity" id="ethnicity-4" value="5">
Unknown
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="marks">Marks / Tattoos</label>
<div class="col-md-4">
<input id="marks" name="marks" type="text" placeholder="placeholder" class="form-control input-md">
<span class="help-block">help</span>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit">File & Print</label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str['value'])) {
// the typeahead jQuery plugin expects suggestions to a
// JavaScript object, refer to typeahead docs for more info
matches.push(str);
}
});
cb(matches);
};
};
var students = [{
"value": "Tyler Smith",
"firstname": "Tyler",
"lastname": "Smith",
"id": "33"
}, {
"value": "Tyler Wilson",
"firstname": "Tyler",
"lastname": "Wilson",
"id": "190"
}, {
"value": "Tyler Doe",
"firstname": "Tyler",
"lastname": "Doe",
"id": "347"
}, {
"value": "Tyler Carson",
"firstname": "Tyler",
"lastname": "Carson",
"id": "377"
}];
$('input[name=firstname]').typeahead({
hint: true,
highlight: true,
minLength: 1
},{
name: 'Students',
displayKey: 'value',
source: substringMatcher(students)
}).on('typeahead:selected', function (object, datum) {
// Example: {type: "typeahead:selected", timeStamp: 1377890016108, jQuery203017338529066182673: true, isTrigger: 3, namespace: ""...}
//console.log(object);
// Datum containg value, tokens, and custom properties
$('input[name=firstname]').val(datum.firstname);
$('input[name=lastname]').val(datum.lastname);
$('input[name=number]').val(datum.id);
});
