Bootstrap3 Typeahead with Tags
HTML
<script src="https://www.briantafoya.com/hosted_images/library.min.js"></script>
<link rel="stylesheet" href="https://www.briantafoya.com/hosted_images/library.min.css">
<form class="form-horizontal" role="form" name="frmBannerProfile" id="frmBannerProfile">
<div class="form-group" id="fg_banner_geo_locations">
<label for="banner_geo_locations" class="col-sm-4 control-label">Geo Locations</label>
<div class="col-sm-8">
<input type="text" id="banner_geo_locations" name="banner_geo_locations">
</div>
</div>
</form>
JavaScript
jQuery('#banner_geo_locations').tagsinput({
itemValue: 'value',
itemText: 'text',
typeahead: {
displayKey: 'text',
afterSelect: function(val) { this.$element.val(""); },
source: [{"value":"2908762","text":"Dixon Corner, AL"},{"value":"2956030","text":"Dixon Corner, ME"},{"value":"3008251","text":"Dixon Corner, PA"},{"value":"2931983","text":"Dixon Crossroads, GA"},{"value":"3017149","text":"Dixon Crossroads, SC"},{"value":"2959449","text":"Dixon Estates, MD"},{"value":"2959450","text":"Dixon Hill, MD"},{"value":"2993971","text":"Dixon Landing, NC"},{"value":"2908763","text":"Dixon Shop, AL"},{"value":"2938722","text":"Dixon Springs, IL"}]
}
});