Gottovote center search version 1

by Eve Mwangi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<center>
<div>
  <h2>Find a Registration Center!</h2>
  <select class="itemName form-control" style="width:600px" name="itemName"></select>
  <div id="results-box"></div>
</div>
</center>

CSS

body {
		font-size:18px;
	}
	.select2-container--default .select2-results>.select2-results__options {
		max-height:1000px;
	}
	.select2-container--default .select2-selection--single {
		border:1px solid #333;
	}
	.select2-selection__placeholder {
		color:#333 !important;
	}
	.select2-dropdown {
		border:1px solid #333;
	}
	#results-box {
		width:600px;
		margin-top:40px;
	}
	.box {
		border-bottom:1px solid #333;
		color:#333;
		text-align:left;
		padding:10px 0px;
	}
	.title {
		font-weight:bold;
	}

JavaScript

$('.itemName').select2({
		placeholder: 'Search ',
		ajax: {
			url: "https://ihwbkt8b0j.execute-api.eu-west-1.amazonaws.com/prod?",
			delay: 500,
			method: 'GET',
			dataType: 'json',
			data: function (params) {
				  return {
					q: params.term + '~2', // search term
					'q.options' : '{fields:["county","constituency", "office_location", "most_conspicuous_landmark"]}',
					page: params.page
				  };
			},
			processResults: function (data, params) {
			  // parse the results into the format expected by Select2
			  // since we are using custom formatting functions we do not need to
			  // alter the remote JSON data, except to indicate that infinite
			  // scrolling can be used
			  params.page = params.page || 1;
			  
			  show_in_results_box(data.hits.hit)

			  return {
				results: data.hits.hit,
				pagination: {
				  more: (params.page * 30) < data.total_count
				}
			  };
			},
			cache: true
		  },
		  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
		  minimumInputLength: 0,
		  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
		});

		
		function show_in_results_box(hits) {
			markup = ''
			for (var i = 0; i < hits.length; i++) {
				repo = hits[i]
				console.log(repo)
				markup += "<div class='box'>"
				markup += "<div class='title'>County: " + repo.fields.county + " County</div>";
				markup += "<div class='description'>Constituency: " + repo.fields.constituency + " Constituency</div>";
				markup += "<div class='title'>Registration Center: " + repo.fields.office_location + "</div>";
				markup += "<div class='description'>"
				if (repo.fields.distance_from_landmark)  markup += repo.fields.distance_from_landmark + " from ";
				if (repo.fields.most_conspicuous_landmark) markup += repo.fields.most_conspicuous_landmark
				markup += "</div>";
				if (repo.fields.contact) markup += "<div class='description'>Contact number: " + repo.fields.contact +...