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

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

[PART 4] – jQuery Autocomplete Suggestion Box CSS term highlights

I have an jquery ui autocomplete that is functioning properly, but I would like the letters I enter into the textfield to be highlighted in the suggestion box when it appears. I want it to look like facebook in that the letter's background is highlighted and the letters are a different color.... so, in my example's case:

Default view:
Font bkgrd color = green
Font color = white

Hover view:
Font bkgrd color = white
Font color = blue

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

I've played around with it a little but I couldn't get it to work so if you could hook it up, I'd appreciate it.

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

find-ships.php (868 bytes) (File Type Details)

php script

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

>>2. It is highlighting every instance of the 'term' letters within the name, versus just those at the beginning of the first and last names which is what I desire.
OK, then use:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:



success: function(data) {
						var re=new RegExp('^('+request.term+')(.*)','i');
						
						response($.map(data.users, function(item) {
							
							return {
								label: item.first_name.replace( re, "<strong class='hit'>$1</strong>$2") + " " + item.last_name.replace( re, "<strong class='hit'>$1</strong>$2"),
								value: item.first_name + " " + item.last_name,
								company: item.co_name
							}
						}))
					}