JavaScript LLPG search control. Insert the script tag (<script type="text/javascript" id="llpg-address-search" src="llpg-search.js"></script>) into the body where the search link is to appear. Dependent on jQuery, jQueryUI and Handlebars.

llpg-search.js

(function ($) {
	$(function () {
		// Create cache objects to store results (minimizes repeat AJAX calls)
		var searchCache = {}, addressCache = {};

		// Our LLPG address search services
		var searchURL = '//intranet.trafford.gov.uk/AddressService/Service.svc/jsonp/SearchLLPGAddress/';
		var addressDetailsURL = '//intranet.trafford.gov.uk/AddressService/Service.svc/jsonp/GetLLPGAddressById/';

		// Search form markup and styling
		var searchForm = '<div id="llpg-address-search-control" title="Trafford LLPG address search" style="display:none;min-width:30em;max-width:80%"><p><input type="text" value="" placeholder="Search Trafford address..." class="search-criteria" id="llpg-search-criteria" /><button class="btn search">search</button><div id="llpg-results-display" style="display:none;"></p></div></div>';
		var searchFormStyle = '<style>.btn,.link{cursor:pointer}.address-data,.address-list,.supplementary-address-data{padding-left:0;margin:0}.address-list{width:100%;max-height:160px;max-height:10rem;display:inline-block;overflow-y:auto}.address-list__item{padding:2px 4px}.address-list__item,.supplementary-address-data__item{list-style:none;line-height:1.3}.address-data{padding:.25rem}.btn{box-sizing:border-box;font-size:1em;padding:4px 8px}.error{color:#f44;margin:1rem}.link{color:#0078c1}.link:hover{text-decoration:underline}.supplementary-address-data__item{padding:2px 0}#llpg-address-search{display:inline-block;font-size:1rem}.search-criteria{min-width:20em}#llpg-search-criteria{border:1px solid #ddd;font-size:1em;padding:.25rem}#do-llpg-search{margin-left:-1px}#llpg-results-display{width:100%;border:1px solid #ddd;margin-top:1rem;background-color:#fff}.return-to-results{margin:1rem .25rem .25rem}.search{text-decoration:none;}.search-results{width:100%}</style>';

		// Handlebars templates
		var llpgSearchResultsTemplate = '<div class="search-results">{{#if Addresses}}<ul class="address-list" id="llpg-address-list">{{#each Addresses}}<li class="address-list__item" style="cursor:pointer" data-address-id="{{Id}}" id="llpg-address-id-{{Id}}">{{ConciseAddress}}</li>{{/each}}</ul>{{else}}<p class="error">No results</p>{{/if}}</div>';
		var llpgAddressDetailsTemplate = '<div class="address-data" id="address-data">{{#if Addresses}}{{#Addresses}}<p>{{ConciseAddress}}</p>{{#if SupplementaryData}}{{#SupplementaryData}}<ul class="supplementary-address-data">{{#if_eq Name "UPRN"}}<li class="supplementary-address-data__item">UPRN: {{Value}}</li>{{/if_eq}}{{#if_eq Name "MAP_EAST"}}<li class="supplementary-address-data__item">EASTING: {{Value}}</li>{{/if_eq}}{{#if_eq Name "MAP_NORTH"}}<li class="supplementary-address-data__item">NORTHING: {{Value}}</li>{{/if_eq}}</ul>{{/SupplementaryData}}{{else}}<p>(No supplementary address information)</p>{{/if}}{{/Addresses}} {{else}}<p class="error">Error showing address details</p>{{/if}}</div>';

		// Insert search form styling into page
		$('head').append(searchFormStyle);

		// Insert search form into page
		$('body').append(searchForm);

		// Insert 'address search' link into page
		$('#llpg-address-search').before('<span class="link llpg-search">LLPG address search</span>');

		// Popup search dialog when 'address search' link is clicked
		$('body').on('click', '.llpg-search', function () {
			$('#llpg-address-search-control').dialog({
				modal: true,
				width: 'auto',
				height: 'auto',
				position: {
					my: 'center',
					at: 'center',
					of: window
				}
			});
		});

		// Search for addresses that match the criteria
		$('#llpg-address-search-control').on('click', '.search', function (e) {
			var searchCriteria = $.trim($('#llpg-search-criteria').val());
			if (searchCriteria.length > 4) {
				searchAddress(searchCriteria);
			} else {
				$('#results-display').html('<p class="error">Search too short</p>').show();
			}
			e.preventDefault();
		});

		// Get address details when address list item is selected
		$('#llpg-address-search-control').on('click', '.address-list__item', function (e) {
			var addressId = $(this).data('address-id');
			if (addressId !== '') {
				getAddressDetails(addressId);
			}
			e.preventDefault();
		});

		// Do address search
		function searchAddress(searchCriteria) {
			var normalisedSearchCriteria = searchCriteria.toUpperCase();
			if (normalisedSearchCriteria in searchCache) {
				renderResults(searchCache[normalisedSearchCriteria], llpgSearchResultsTemplate);
			} else {
				$.ajax({
					type: 'GET',
					url: searchURL + searchCriteria + '?callback=?',
					contentType: "application/json; charset=utf-8",
					dataType: "jsonp",
					success: function (results) {
						searchCache[normalisedSearchCriteria] = results;
						renderResults(results, llpgSearchResultsTemplate);
					},
					error: function (jqXHR, textStatus, errorThrown) {
						console.log(jqXHR);
					}
				});
			}
		}

		// Get address details for specific address ID
		function getAddressDetails(addressId) {
			if (addressId in addressCache) {
				renderResults(addressCache[addressId], llpgAddressDetailsTemplate);
			} else {
				$('#results-display').hide();
				$.ajax({
					type: 'GET',
					url: addressDetailsURL + addressId + '?callback=?',
					contentType: "application/json; charset=utf-8",
					dataType: "jsonp",
					success: function (results) {
						addressCache[addressId] = results;
						renderResults(results, llpgAddressDetailsTemplate);
					},
					error: function (jqXHR, textStatus, errorThrown) {
						console.log(jqXHR);
					}
				});
			}
		}

		// Display results as HTML using Handlebars template
		function renderResults(results, templateToUse) {
			var template = Handlebars.compile(templateToUse);
			$('#llpg-results-display').html(template(results)).show();
		}

		// Custom Handlebars helper to compare values
		Handlebars.registerHelper('if_eq', function (a, b, opts) {
			if (a == b) return opts.fn(this);
			else return opts.inverse(this);
		});
	});
})(jQuery);