jQuery UI example code

This article covers basic usage of the jQuery UI 1.8.14 "widgets": autocomplete and datepicker.

I was really excited about learning the basics of jQuery while working with it and I think it deserves its own article for future reference for when I ever need to work with basic jQuery or these widgets again.

• jQuery UI datepicker
  • Basic initialization parameters
  • Custom event: onSelect
    Triggers when a date is selected. You can use it to validate dates.
    
    
• jQuery UI autocomplete
  • Basic initialization parameters
  • custom source: $.get / AJAX and response handling
    It's an alias function of $.ajax but takes less code, a $.post equivalent also exists. I use it in this case to retrieve and handle JSON data for the autocomplete list.
    
    TIP: Don't add HTML here, it will only get rendered as text in the search field. Any HTML should be added in the _renderItem function.
    
    TIP: Every list item is an object with both a label and a value - this is very useful as it helps separating and using sets of data returned in the JSON response. Like when you want to view one text in the search field, but send another value when the form is submitted.
    
    
  • Custom event: focus
    This event will trigger when an item from the autocomplete list has focus.
    
    
  • Custom event: select
    This event will trigger when an item from the autocomplete list is selected.
    
    
  • Custom datepicker().data()._renderItem
    A very useful custom function to create in order to fully customize the autocomplete list output. Here is the place to add HTML, if any.
    
    

/*
 *	Copyright (C) 2011 Dag Jonny Nedrelid
 *
 *	Original source code for utilizing:
 *
 *	jQuery UI 1.8.14
 *	- Datepicker
 *	- Autocomplete
 */
 
$(function() {
	$( "#date1_view" ).datepicker({
		numberOfMonths: 2,
		firstDay: 1,
		minDate: '-1d',
		dateFormat: 'dd.mm.yy',
		altField: '#date1',
		altFormat: 'yy-mm-dd',
		onSelect: function( selectedDate ) {
			
			var date1 = $('#date1').val();
			var date2 = $('#date2').val();
			
			if (date1 == '' || date2 == '')
				return;
			
			var d = date1.split('-');
			var fromDate = parseInt(d[0] + d[1] + d[2]);
			var d = date2.split('-');
			var toDate = parseInt(d[0] + d[1] + d[2]);
			
			if (fromDate > toDate) {
				$('#date2_view').val('');
				$('#date2').val('');
			}
		}
	});
	
	$( "#date2_view" ).datepicker({
		numberOfMonths: 2,
		firstDay: 1,
		minDate: '-1d',
		dateFormat: 'dd.mm.yy',
		altField: '#date2',
		altFormat: 'yy-mm-dd',
		onSelect: function( selectedDate ) {
			
			var date1= $('#date1').val();
			var date2 = $('#date2').val();
			
			if (date1 == '' || date2 == '')
				return;
			
			var d = date1.split('-');
			var fromDate = parseInt(d[0] + d[1] + d[2]);
			var d = date2.split('-');
			var toDate = parseInt(d[0] + d[1] + d[2]);
			
			if (fromDate > toDate) {
				$('#date1_view').val('');
				$('#date1').val('');
			}
		}
	});
	
	$( "#ac_view" ).autocomplete({
		minLength: 3,
		delay: 150,
		source: function (request, response) {
			var query = 't=type&q=' + request.term;
			$.get('autocomplete.php', query, function(data) {
			
				// 
				// Evaluate the following PHP code to put in your autocomplete.php
				// Also refer to the _renderItem function further below.
				// 
				// $output[] = '';
				// foreach ($result_array as $r) {
				// $output[] = $r['value1'] .
				//	','. $r['value2'] . 
				//	','. $r['value3'] .
				//	','. $r['value4'];
				// }
				// if (count($result_array) == 10)
				// 	$output[] = utf8_encode('Found 10+,, type more to limit your search...,');
				// 
				// json headers...
				// exit(json_encode($output));
				// 
			
  				response( $.map( data, function( item ) {
					var r = item.split(',');
					copySearchFields();
					setSearchType('generic');
					
					if (r[0] == '') {
						return {
							label: 'Ingen treff...',
							value: ''
						}
					}
					
					return {
						label: r[0] 
							+ (r[1]==''?'':', '+ r[1]) 
							+', '+ r[2],
						value: r[3]
					}
				}));
			});
		},
		focus: function( event, ui ) {
			$( "#ac_view" ).val( ui.item.label );
			return false;
		},
		select: function( event, ui ) {
			if (ui.item.value == '')
				ui.item.label = '';
			$( "#ac_view" ).val( ui.item.label );
			$( "#ac" ).val( ui.item.value );
			setSearchType('filename');
			return false;
		}
	})
	.data( "autocomplete" )._renderItem = function( ul, item ) {
	
		var r = item.label.split(',');
		var loop_a, output;
		
		output = r[0];
		for (loop_a=1; loop_a<r.length; loop_a++) {
			if (loop_a == r.length-1 && r[0] != 'Found 10+')
				output += ', <b>'+ r[loop_a] +'</b>';
			else
				output += ', '+ r[loop_a];
		}
		
		if (r[0] == 'Found 10+')
			output = '<span class="over10txt">'+ output +'</span>';
		else
			output = '<a>'+ output + '</a>';
			
		return $( "<li></li>" )
			.data( "item.autocomplete", item )
			.append( output )
			.appendTo( ul );
	};
});

function copySearchFields() {
	$( "#ac" ).val( 
		$( "#ac_view" ).val()
	);
}

function setSearchType(w) {
	switch (w) {
	case 'generic':
		$( "#form1" ).attr(
			"action",
			"http://example.com/action1.php"
		);
		$( "#ac" ).attr(
			"name",
			"Search1"
		);
		break;
	case 'filename':
		$( "#form1" ).attr(
			"action",
			"http://example.com/action2.php"
		);
		$( "#ac" ).attr(
			"name",
			"Search2"
		);
		break;
	}
}