prueba.html

<meta charset="utf-8">
	
	<style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	</style>
	<link type="text/css" href="js/jquery-ui/css/blitzer/jquery-ui-1.8.5.custom.css" rel="stylesheet" />		<script type="text/javascript" src="js/jquery-ui/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui/js/jquery-ui-1.8.5.custom.min.js"></script>
	<script>
	$(function() {
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );
			$( "#log" ).attr( "scrollTop", 0 );
		}

		$( "input[name^='birds']" ).autocomplete({
			source: "search.php",
			minLength: 2,
			focus: function(event, ui){
				$("input[name^='birds']").val(ui.item.label);
				return false;
			},
			select: function(event, ui){
				$("input[name^='birds']").val(ui.item.label);
				
				return false;
			}
		});
	});
	</script>



<div class="demo">

<div class="ui-widget">
	<label for="birds">Birds: </label>
	<input id="birds[]" name="birds[]" />
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Result:
	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

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



<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
<p>The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.</p>
</div><!-- End demo-description -->