Got to Vote Search

by Eve Mwangi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<div>
  <h2>Find a Registration Center!</h2>
  <select class="itemName" style="width:500px" name="itemName">Search</select>
</div>

CSS

.select2-container--default .select2-results>.select2-results__options {
    max-height: 1000px;
  }

JavaScript

$('.itemName').select2({
	    placeholder: 'Search',
	    ajax: {
	      url: "https://www.googleapis.com/fusiontables/v2/query?key=AIzaSyAwvkIls5mQybyp2R3g4FGiVetNdeVjUeE",
	      dataType: 'json',
	      delay: 250,
	      data: function(params) {
	        return {
	          sql: "SELECT * FROM 1Z8E12VbKZNAbiAsBBBgEcb3CiuIqDyaa-cdXQLq9 WHERE 'County Name' CONTAINS IGNORING CASE '" + params.term + "'", // search term
	          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;

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

	  function formatRepo(repo) {
	    //if (repo.loading) return repo.text;
	    console.log(repo)
	    var markup = "<div class='select2-result-repository clearfix'>" +
	      //"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
	      "<div class='select2-result-repository__meta'>" +
	      "<div class='select2-result-repository__title'>" + repo[2] + " County</div>";

	    markup += "<div class='select2-result-repository__description'>" + repo[4] + " Constituency</div>";
	    markup += "<div class='select2-result-repository__description'>" + repo[8] + "</div>";

	    markup += "</div></div><hr>";

	    return...