最近有个项目,要使用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中是这样处理的:
<?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);
}
?>
直接通过mysql查询返回的。记住需要是json格式的数组。
有不正确的地方,敬请留言。