JSFiddle - React, Tailwind, and code Playground

by Niki Molnar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="panel panel-primary">
		<div class="panel-heading">Add to CWO Development: Public Speaking (Basic Course)</div>
		<div class="panel-body">
			<form name="frmAdd" id="frmAdd" action="cwod_attendee_add.php" method="post">
			<input type="hidden" name="add" value="yes" />
				<div class="form-group row">
					<label for="cwod_title" class="col-xs-3 col-form-label">Search for CWOD Person</label>
					<div class="col-xs-9 bs-example">
						<input type="text" class="typeahead tt-query" id="cwod_name" name="cwod_name">
						<input type="text" id="cwod_no" name="cwod_no" readonly>
					</div>
				</div>
				<button type="submit" class="btn btn-primary">Add</button>
			</form>
		</div>
	</div><!--panels-->

CSS

@import url('https://getbootstrap.com/dist/css/bootstrap.css');
@import url('https://rawgithub.com/ashleydw/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css');

body{
    padding: 20px;
}
.bs-example {
		/*font-family: sans-serif;*/
		position: relative;
	}
	.typeahead, .tt-query, .tt-hint {
		border: 2px solid #CCCCCC;
		border-radius: 8px;
		font-size: 22px; /* Set input font size */
		height: 30px;
		line-height: 30px;
		outline: medium none;
		padding: 8px 12px;
		width: 396px;
	}
	.typeahead {
		background-color: #FFFFFF;
	}
	.typeahead:focus {
		border: 2px solid #0097CF;
	}
	.tt-query {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	}
	.tt-hint {
		color: #999999;
	}
	.tt-menu {
		background-color: #FFFFFF;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 8px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
		margin-top: 12px;
		padding: 8px 0;
		width: 422px;
	}
	.tt-suggestion {
		font-size: 22px;  /* Set suggestion dropdown font size */
		padding: 3px 20px;
	}
	.tt-suggestion:hover {
		cursor: pointer;
		background-color: #0097CF;
		color: #FFFFFF;
	}
	.tt-suggestion p {
		margin: 0;
	}

JavaScript

var data = {
			json: "{\"cwods\":[{\"id\":112,\"label\":\"Siobhan Aarons (SE1 6DT)\"},{\"id\":70,\"label\":\"Caroline Adams (TA11 6PW)\"},{\"id\":136,\"label\":\"Eunika Adams (SE19 3UH)\"},{\"id\":43,\"label\":\"Lola Adedoyin  (WD25 0NP)\"},{\"id\":145,\"label\":\"Shade  Adoh  (HP15 6PA)\"},{\"id\":209,\"label\":\"Shade  Adoh  (HP15 6PA)\"},{\"id\":257,\"label\":\"Lisa Advani (BA2 1AN)\"},{\"id\":287,\"label\":\"Asma Ahmed (SW6 4EA)\"},{\"id\":19,\"label\":\"Sarah Ajiboye (M7 4YH)\"},{\"id\":237,\"label\":\"Sarah Ajiboye (M7 4YH)\"},{\"id\":83,\"label\":\"Maria Ali (RM12 4AE)\"},{\"id\":105,\"label\":\"Maria Ali (RM12 4AE)\"},{\"id\":250,\"label\":\"Suelan Allison (N5 2LT)\"},{\"id\":44,\"label\":\"Mohammed Amin (M16 8EX)\"},{\"id\":18,\"label\":\"johnsi jovitha Anbalagan (LS8 2DT)\"},{\"id\":265,\"label\":\"Stella Andersen-Payne (Gu72hn)\"},{\"id\":121,\"label\":\"Stella Andersen-Payne (GU7 2HN)\"},{\"id\":295,\"label\":\"Catherine Anderson (CA11 9TJ)\"},{\"id\":293,\"label\":\"Mohammad-Irfan Arif (HP5 2NN)\"},{\"id\":31,\"label\":\"Susan Arnold (B79 9JT)\"},{\"id\":97,\"label\":\"Barbara ARZYMANOW (W9 1AD)\"},{\"id\":127,\"label\":\"Rehana Asani (HA6 3SJ)\"},{\"id\":110,\"label\":\"Ayesha  Azad (Gu22 0db)\"},{\"id\":73,\"label\":\"Susan Badman (SE21 7JB)\"},{\"id\":63,\"label\":\"Sukhy Bahia (TW5 0NB)\"},{\"id\":294,\"label\":\"Sheila Bailey (IP23 8JT)\"},{\"id\":20,\"label\":\"Margaret Baker (RH16 1RU)\"},{\"id\":260,\"label\":\"Cynthia Barker (WD6 1HE)\"},{\"id\":224,\"label\":\"Andrew Barrand (TQ3 3GD)\"},{\"id\":225,\"label\":\"Nicola Barthorpe (M21 9DT)\"},{\"id\":11,\"label\":\"Suzanne Bartington (OX28 3XU)\"},{\"id\":6,\"label\":\"Rowena Bass (KT1 3SS)\"},{\"id\":39,\"label\":\"Joanne Beavis (CO9 1SQ)\"},{\"id\":328,\"label\":\"Joanne Beavis (C09 1SQ)\"},{\"id\":60,\"label\":\"Michelle Belsom (DE23 6HU)\"},{\"id\":227,\"label\":\"Michelle Belsom (DE22 4DS)\"},{\"id\":146,\"label\":\"Nicola Benjamin (E5 0BS)\"},{\"id\":165,\"label\":\"Fawn Bennett (GL17...