最近有個專案，要使用autocomplete，在jquery的UI上面找到了出處，不過有個顯示效果我總是沒法解決。

返回的是一個數組，其中的陣列中的data的內容只是一部分，需要顯示給使用者更多的資訊。比如下拉框的顏色，星級，使用者在

敲擊回車或者單擊的時候，輸出到文字框的是另外的內容，於是就需要在jquery的autocomplete中進行修改。

方法如下：

var caption_value = $('#caption').val();
		var ajax_url = '/design_templates/edit_design_namecheck_ajax.php?' + caption_value; 
		$("#caption").autocomplete({
			source: ajax_url,
			 focus: function (event, ui) {
				 //$('#caption').val(ui.item.v);
				return false;
            },
			select: function(event, ui) {
				//$('#caption').val(ui.item.v);
				return false;
			}
		})
		.data( "autocomplete" )._renderItem = function( ul, item ) {
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( "<a style='color:" + item.color + "'>" + item.v + "(" + item.desc + ")" + item.star + "</a>" )
				.appendTo( ul );
		};
 

autocomplete中原生支援。這個.data()的方法，指明瞭是autocomplete元素，_renderItem()是指渲染每條資料，是指使用者返回的資料，我需要進行加工處理，其中ul是整個下拉框，其中的每條資料是一個li元素。

其中li元素中進行了<a>元素的填充。這裡的item是返回的陣列元素的某一條資料。

在PHP中是這樣處理的：

<?php
setTemplate('none');
$DB = Database::connect();
$returnArr = array();
if (isset($_GET['term'])) {
	
	$sql = "SELECT d.caption, d.design_state_id, c.caption AS cat_caption, c.site_id FROM designs d 
				JOIN avq_categories c ON d.category_id = c.id 
				WHERE d.caption LIKE ".mysql_quote_smart($_GET['term']. '%')." ORDER BY c.site_id, d.caption ASC LIMIT 10";
	//echo $sql;exit;
	$res = $DB->query($sql);
	$row = mysql_fetch_assoc($res);
	// echo '<pre style="text-align: left;">'; print_r($row); echo '</pre>';
	do {
		$removed = '';
		$coloring = '';
		if ($row['site_id'] == 1) $coloring = '#278c16';
		if ($row['site_id'] == 2) $coloring = '#176c8c';
		if ($row['site_id'] == 3) $coloring = '#5f1719';
		if ($row['design_state_id'] == 3) $removed = ' **';
		if ($row['design_state_id'] == 2) $removed = ' *';
		if ($row['cat_caption'] != '') {
			//$returnString = '<span style="color:'.$coloring.';">' . $row['caption'] . ' ('. $row['cat_caption'].')'. $removed.'</span>';
			//$returnString = $row['caption'] . "(" . $row['cat_caption']. ")" . $removed;
			$returnString = array('color'=> $coloring, 'v'=>$row['caption'], "desc" => $row['cat_caption'], "star"=>$removed);
			array_push($returnArr, $returnString);		
		}
	} while ($row = mysql_fetch_array($res));
	//print $returnString;
	echo json_encode($returnArr);
}	
?>
 

有不正確的地方，敬請留言。