0

データベース（Oracle）からデータを取得するjQueryオートコンプリートスクリプトがあります。正常に動作しますが、データを別の方法で表示したいです。

例として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 );
};

誰かアイデアがありますか？

4

0 に答える 0