Source

autocompleteface / index.php

Full commit
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Walter Cruz">
	<!-- http://blogs.microsoft.co.il/blogs/alon_nativ/archive/2011/05/30/search-facebook-friends-with-jquery-autocomplete.aspx -->
	<link type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
	<script type="text/javascript" charset="utf-8" src="jquery-1.6.2.js"></script>
	<script type="text/javascript" charset="utf-8" src="jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(function(){

		$("#example").autocomplete({
			source: "search.php",
			select: function( event, ui ) {
				//console.debug(ui.item.url)
				//console.debug($(ui.item))
				$( "#example" ).val( $(ui.item.label).text() )
				$('#debug').html('<a href="'+ui.item.url+'">' +ui.item.url+'</a>')
				return false;
			},
			focus: function( event, ui ) {
				$( "#example" ).val( $(ui.item.label).text() )
				return false;
			},
		})
		.data( "autocomplete" )._renderItem = function( ul, item ) {
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( "<a href='" + item.url + "'>" + '<img src="' + item.image + '" style="float:left;width:25px;height:25px"/>'+ item.label + "</a>" )
				.appendTo( ul );
		};;
	})

	</script>
	<!-- Date: 2011-12-05 -->
</head>
<body>
Exemplo<input id="example" type="text" style="width:200px" />
<br />
<div id="debug"></div>
</body>
</html>