Question : jQuery Autocomplete with PHP / MySQL [PART 2]

( I am splitting my questions up in parts so that you can get 1000’s of points versus just 500.  Each question will build upon the previous one so make sure you look for [PART 3] and [PART 4] after you figure this one out. )

[PART 2] – jQuery Autocomplete CSS Issue

I have created a UI autocomplete that is modeled after a Facebook autocomplete in that I included a div for a profile picture.  Everything is working perfectly except for my CSS rollover in my suggestion box.  As you will see in my example link below, my green ui hover is shrinking to the top of each <li> tag rather than covering the entire <li>.

What I am looking for is...

  • The hover to work properly

  • The hover text  to be white

  • The hover to encompass the img div but not cover it.


I tried a number of things already but I'm getting something wrong.  If you could hook it up, I would appreciate it very much.

Example Link: http://www.bulkbrokeraid.com/test%20shit/autocomplete.php

I have included my code below and also attached the files for you to play with.
 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:

//This is my page

<!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: {
						//maxRows: 12,
						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);				
				return false;
			}
		})
		.data( "autocomplete" )._renderItem = function( ul, item ) {
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( "<a><div class='poster_img'></div><span class='para'><strong>" + item.label + "</strong><br>" + item.company + "</span></a>" )
				.appendTo( ul );
		};
	});
	</script>
    <style>
	.para {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #4a4a4a;	
	float: left;
	}
	.poster_img {
	float: left;
	height: 48px;
	width: 48px;
	border: 1px solid #ddd;
	background-image: url(poster_image_bkgrd.jpg);
	margin-top: 3px;
	margin-right: 8px;
	margin-bottom: 3px;
}

	</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>
Attachments:
 
autocomplete.php (3 KB) (File Type Details) 
test page
 
 
find-ships.php (900 bytes) (File Type Details) 
php script
 

Answer : jQuery Autocomplete with PHP / MySQL [PART 2]

Doh, missed of the class identifier ...
1:
2:
3:

$('.ui-corner-all').focus(){
    color:'#ffffff'
}
Random Solutions  
 
programming4us programming4us