我制作了一个电影自动填充功能,您可以在其中键入一个字母,它会为您提供电影的建议列表。在每部电影旁边,我还添加了电影发布的日期。
这是我在PHP中解析它的方式:
$tmdb = new TMDb($api_key);
$json = json_decode($tmdb->searchMovie($_GET['term']));
$response = array();
$i=0;
foreach($json as $movie){
if($i >= 6) break;
$response[$i]['value'] = $movie->name;
$response[$i]['label'] = $movie->name . ' <span class="m_rel">(' . date('Y',strtotime($movie->released)).')</span>';
$i++;
}
echo json_encode($response);
现在,如果我使用jQuery 1.8.2,一切都很完美。
我得到了这个结果:
如果我使用更高版本的jQuery UI,我会得到这个:
html很简单,它只是一个表单,自动完成它是jQuery的那个,所以没什么好看的。一旦我更改了UI的版本,就会出现问题。
有人可以帮我解决这个问题吗?我不能使用jQuery 1.8.2,因为我遇到了draggable和IE(所有版本)的其他问题,因为它是一个已知的bug而无法解决。
在安德鲁的惠特克回答之后我的JS:
var movieName = $('#movieName');
movieName.autocomplete({
source: 'movieInfo.php',
select: function (event, ui) {
$(this).val(ui.item.imdbid);
$(".re5").submit()
}
})._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "<span class='m_rel'>" + item.releasedate + "</span></a>")
.appendTo(ul);
};
're5'是表格的类。
非常感谢
答案 0 :(得分:0)
使用自动填充功能覆盖菜单项外观的首选方法是替换默认的_renderItem
方法,如example所示。
所以我会做两件事:
修改PHP不要在结果中返回标记:
$tmdb = new TMDb($api_key);
$json = json_decode($tmdb->searchMovie($_GET['term']));
$response = array();
$i=0;
foreach($json as $movie){
if($i >= 6) break;
$response[$i]['value'] = $movie->name;
$response[$i]['label'] = $movie->name;
$response[$i]['releasedate'] = $movie->released;
$i++;
}
echo json_encode($response);
覆盖_renderItem
方法以span
显示发布日期:
$("#selector").autocomplete({ /* options */ })
.data( "autocomplete" )._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + " <span class='m_rel'>(" + item.releasedate + ")</span></a>")
.appendTo(ul);
};
很抱歉,如果PHP有点关闭;我不是那里的专家。