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

( 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 4] and beyond after you figure this one out.)

[PART 3] – jQuery Autocomplete Suggestion Box CSS Width Issue

When viewing the example link below, you'll notice that as you either enter characters into the textfield or remove them, the suggestion box fluctuates in width. I would like to have this width fixed to the size of the textfield. Anybody know whats going on here? I appreciate the help.

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

         
           
             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:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:

           
           
          <!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>

           
         

Attachments:

autocomplete.php (3 KB) (File Type Details)

test page

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

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

Is this still an issue? I've tested it in Chrome, IE8 and Firefox 3.5 and all three look ok to me.