使用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 $( "<li></li>" ).data( "item.autocomplete", item ).append( "<a style='color:" + item.color + "'>" + item.v + "(" + item.desc + ")" + item.star + "</a>" ).appendTo( ul );};

這裡使用了一個方法，就是在li元素中插入<a>元素，其他的元素，比如span，似乎都不可以，可能是因為a這個是link元素，可以支援點擊，或者

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

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

在PHP中是這樣處理的：

<?phpsetTemplate('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);}?>

直接通過mysql查詢返回的。記住需要是json格式的數組。

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