Search Function and Auto-Complete

A search function is a very important feature within the project. Allowing the user to easily find information is at the core of what the project is about.

In order to setup this function I first loaded in the XML file which contains all of the building data used on the map. When the load is complete I call a new function called parseXML() which places each of the building titles and room names into an array ready for the autocomplete function.

$.ajax({
	type: "GET",
	url: "assets/buildings.xml",
	dataType: "xml",
	success: parseXml,
	complete: setupAC,
	failure: function(data) {
		alert("XML File could not be found");
		}
});

function parseXml(xml){
	$(xml).find("building").each(function(){
		var spaces = $(this).attr("label").replace(/_/g, ' ');
		buildings.push(spaces);
		$(this).find('rooms').children().each(function(){
			var room = $(this).text();
			buildings.push(room);
		});
	});	
}

The function setupAC() then uses the JQuery UI autocomplete functionality to match what the user is typing and submit the search query when the user selects one of the options.

function setupAC() {
	$("input#searchBox").autocomplete({
		source: function( request, response ) {
			var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
			response( $.grep( buildings, function( item ){
				return matcher.test( item );
			}) );
		},
		minLength: 1,
		select: function(event, ui) {
		        $("input#searchBox").val(ui.item.value);
			$("#searchForm").submit();
		}
	});
}

Once the form is submitted the data is sent to the function below which animates the 3D camera to the location the user has searched for and reveals the popup information for that building. If a user searches for a room then they are taken to the building which houses that room instead.

function searchResult(searchvalue) {

	var foo = searchvalue.searchString.value;
	if(jQuery.inArray( foo, buildings ) != -1){
		$('#searchBox').css('color','#666');
		$('.search-error').hide();
		var dashes = foo.replace(/\s/g, '_');

		var room = $(xml).find('room:contains('+foo+')');

		if( !room.length){
			$('#modalfront, #modalback').empty();
			$("#modalpanel").removeClass('fadeOutUp fadeInDown opaque');
			$(".card").removeClass('flipped');
			closeTweet();
			modal = scene.getObjectByName( dashes, true );
			placeMarker(modal);
		}else{
			var rooms = $(room).parent()
			var building = rooms.parent().attr('label');
			$('#modalfront, #modalback').empty();
			$("#modalpanel").removeClass('fadeOutUp fadeInDown opaque');
			$(".card").removeClass('flipped');
			closeTweet();
			modal = scene.getObjectByName( building, true );
			placeMarker(modal);
		}
	}else{
		$('#searchBox').css('color','#e83333');
		$('.search-error a').css('color','#e83333');
	}

	return false;
}

Be the first to leave a comment. Don’t be shy.

Join the Discussion

Thank you for taking the time to look over my most recent work. Please feel free to contact me for any further information, to hire me for a project or to simply have a good old chat.

Click here to hire me