使用jquery的autocomplete的方法，进行用户自定义的显示列表方法给用户

最近有个项目，要使用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 $( "
" )
				.data( "item.autocomplete", item )
				.append( "" + item.v + "(" + item.desc + ")" + item.star + "" )
				.appendTo( ul );
		};

这里使用了一个方法，就是在li元素中插入元素，其他的元素，比如span，似乎都不可以，可能是因为a这个是link元素，可以支持点击，或者

autocomplete中原生支持。这个.data()的方法，指明了是autocomplete元素，_renderItem()是指渲染每条数据，是指用户返回的数据，我需要进行加工处理，其中ul是整个下拉框，其中的每条数据是一个li元素。

其中li元素中进行了元素的填充。这里的item是返回的数组元素的某一条数据。

在PHP中是这样处理的：

query($sql);
	$row = mysql_fetch_assoc($res);
	// echo '
'; print_r($row); echo '
';
	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 = '' . $row['caption'] . ' ('. $row['cat_caption'].')'. $removed.'';
			//$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);
}	
?>

直接通过mysql查询返回的。记住需要是json格式的数组。

有不正确的地方，敬请留言。