suggest.html

This HTML/JavaScript code is a sample to query the prefix tree for autocomplete suggestions.

This is the documentation of all downloads.

Move your mouse over the code area and look at its top right corner where a set of icons for downloading, copy-pasting, etc. will appear.

Click here to download in a single zip package the additional files used in the example below (jquery-ui-1.8.7.custom.css, jquery-1.4.4.min.js, jquery-ui-1.8.7.custom.min.js, ui-anim_basic_16x16.gif).


<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>PathwayLinker Autocomplete Demo</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.7.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
		<meta charset="utf-8">

	<style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	#prefix {
		width: 500px;
	}
	</style>
	<script>

	$(function() {
		function split( val ) {
			return val.split( /,\s*/ );
		}
		function extractLast( term ) {
			return split( term ).pop();
		}

		$( "#prefix" )
		// don't navigate away from the field on tab when selecting an item
		.bind( "keydown", function( event ) {
				if ( event.keyCode === $.ui.keyCode.TAB &&
					$( this ).data( "autocomplete" ).menu.active ) {
				event.preventDefault();
			}
		})

		.autocomplete({
			source: function( request, response ) {
				var species=$("input[@name='orgsel']:checked").val();
				$.getJSON( "suggest.pl?species="+species, {
					term: extractLast( request.term )
				}, response );
			},
			minLength: 1,
			focus: function() {
				// prevent value inserted on focus
				return false;
			},
			select: function( event, ui ) {
				var terms = split( this.value );
				// remove the current input
				terms.pop();
				// add the selected item
				terms.push( ui.item.value );
				// add placeholder to get the comma-and-space at the end
				terms.push( "" );
				this.value = terms.join( ", " );
				return false;
			}
		});
	});
	</script>
</head>
<body>

<div class="demo">

<input id="orgsel_cel" name="orgsel" value="caeel" type="radio" CHECKED> <label for="orgsel_cel">C. elegans</label>
<input id="orgsel_dme" name="orgsel" value="drome" type="radio"> <label for="orgsel_dme">D. melanogaster</label>
<input id="orgsel_hsa" name="orgsel" value="human" type="radio"> <label for="orgsel_hsa">H. sapiens</label>

<div class="ui-widget">
	<input id="prefix" />
</div>

<!-- <p><small>(Database maintenance, autocomplete temporarily turned off. 2011-02-11 09:52, Adam)</small></p> -->

</div><!-- End demo -->

</body>
</html>