<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://www.pltproject.org/testing18/includes18/jQuery/css/plt-theme/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<script src="http://www.pltproject.org/testing18/includes18/jQuery/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://www.pltproject.org/testing18/includes18/jQuery/js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#send_to").autocomplete({
source: function(request, response) {
$.ajax({
url: "find_ships.php",
dataType: "json",
data: {
//featureClass: "P",
//style: "full",
//maxRows: 10,
term: request.term
},
success: function(data) {
response($.map(data.users, function(item) {
return {
label: item.first_name + " " + item.last_name,
value: item.first_name + " " + item.last_name,
company: item.co_name
}
}))
}
})
},
minLength: 1,
focus: function(event, ui) {
$('#send_to').val(ui.item.label);
return false;
},
select: function(event, ui) {
$('#send_to').val(ui.item.label);
//$('#project-id').val(ui.item.value);
//$('#project-description').html(ui.item.desc);
//$('#project-icon').attr('src', '../images/' + ui.item.icon);
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a style='float: left;'><div float: left;'><div class='poster_img'></div><span class='para'><strong>" + item.label + "</strong><br>" + item.company + "</span></div></a>" )
.appendTo( ul );
};
});
</script>
<style>
.para {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
float: left;
padding-top: 3px;
}
.poster_img {
float: left;
height: 48px;
width: 48px;
border: 1px solid #ddd;
background-image: url(poster_image_bkgrd.jpg);
margin-top: 5px;
margin-right: 8px;
margin-bottom: 5px;
margin-left: 5px;
z-index: 2;
}
</style>
</head>
<body>
<p>Autocomplete Example</p>
<div class="para">
<label for="send_to" class="para">To: </label>
<input class="para" id="send_to" size="60" />
</div>
</body>
</html>
|