jQuery 1.7.2 および jQuery UI 1.8.18 を使用します。ソース属性にローカル データを使用すると、すべてが期待どおりに機能します。ドキュメントによると、ソース配列は文字列値の配列またはオブジェクトの配列にすることができます。
配列: 配列はローカル データに使用できます。次の 2 つの形式がサポートされています。
文字列の配列: [ "Choice1", "Choice2" ]
label プロパティと value プロパティを持つオブジェクトの配列: [ { label: "Choice1", value: "value1" }, ... ]
さらに、ソース属性は、上記のようにフォーマットされた JSON データで応答する URL にすることができます。
文字列: 文字列が使用される場合、オートコンプリート プラグインは、その文字列が JSON データを返す URL リソースを指していると想定します。同じホスト上または別のホスト上にある可能性があります (JSONP を提供する必要があります)。オートコンプリート プラグインは結果をフィルター処理しません。代わりに、サーバー側スクリプトが結果をフィルター処理するために使用する用語フィールドを含むクエリ文字列が追加されます。たとえば、ソース オプションが "http://example.com" に設定され、ユーザーが foo と入力した場合、GET 要求はhttp://example.com?term=fooに対して行われます。データ自体は、上記のローカル データと同じ形式にすることができます。
私の JSON レスポンダーが文字列の単純な配列を返す場合、オートコンプリートは正しく機能します。ただし、JSON レスポンダーが上記のようにフォーマットされたオブジェクトの配列を返す場合、リクエストは URL に対して行われますが、ドロップダウン リストにはデータが入力されません。JavaScript コンソールにエラーは表示されません。
オートコンプリートの呼び出しは次のようになります。
var source_url = '/json/codes.php?type=globalcode&cid=25';
$('.gcode').autocomplete({
minLength: 2,
source: source_url
});
レスポンダは PHP で書かれています。この問題を解決するまでは、単なるスタブです。
header('Content-Type: application/json, charset=UTF-8');
...
if( !$_REQUEST['type'] || !$_REQUEST['cid'] ){
echo('[]');
return false;
}
if( $_REQUEST['type'] == 'globalcode' ){
$cid = sprintf("%d", $_REQUEST['cid']);
$stub = "[ { label: 'Label for 1234', value: '1234' }, { label: 'Label for 5678', value: '5678' } ]";
echo( $stub );
return false;
}
繰り返しになりますが、データがローカルの場合は両方の種類の配列で機能し、データがリモートの場合は文字列値の配列で機能します。データがオブジェクトのリモート配列である場合、リストは読み込まれず、JavaScript はエラーをスローしません。