我有一个 jQuery 自动完成脚本,它从数据库 (Oracle) 获取数据。它工作正常,但我想以不同的方式显示数据。
我以http://jqueryui.com/autocomplete/#custom-data为例。不知何故,我不让它工作。我基本上是在尝试与示例中的相同(与项目一起显示描述),但使用远程数据源。
这是我的代码:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script>
$(document).ready(function()
{
$('#id').val("");
$('#value').val("");
$('#desc').val("");
$("#value").autocomplete({
source: "states.php",
minLength: 1,
select: function(event, ui) {
$('#id').val(ui.item.id);
$('#value').val(ui.item.value);
$('#desc').val(ui.item.desc);
}
});
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.value + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
</script>
</head>
<body>
<form action="<?php echo $PHP_SELF;?>" method="post">
<p class="ui-widget">
<input type="text" id="value" name="value" />
<input type="text" id="desc" name="desc" />
<input type="text" id="id" name="id" /></p>
<p><input type="submit" name="submitBtn" value="Submit" /></p>
</form>
</body>
</html>
如果我删除 .data 块,我的自动完成工作正常。但当然没有正确的格式。
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.value + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
有人有想法吗?