web-dev-qa-db-ja.com

jsonとajaxによるjQuery UIのオートコンプリート

JSONを介してラベルと値のプロパティを持つ配列を渡すことに関する多くの質問を見てきましたが、文字列の受け渡しについてはそれほどではありませんでした。私の問題は、オートコンプリートを埋めることができないようです。私はダンプ関数を実行し、JSON経由でこれらのサンプル値をオートコンプリートに渡しています：

0: 23456
1: 21111
2: 25698

ここにいくつかのコードがあります：

$("#auto_id").autocomplete( {
    source: function(request,response) {

        $.ajax ( {
          url: "fill_id.php",
          data: {term: request.term},
          dataType: "json",
          success: function(data) {
            //what goes here?
                 } 
    }) }
   });

次に、fill_id.phpを示します。

$param = $_GET['term'];
$options = array();


$db = new SQLite3('database/main.db');
    $results = $db->query("SELECT distinct(turninId) FROM main WHERE turninid LIKE '".$param."%'");


while ($row_id = $results->fetchArray()) {
        $options[] =  $row_id['turninId']; 
    }   
echo json_encode($options);

オートコンプリートが空白のままです。 JSON配列を変更してそれを埋めるにはどうすればよいですか？または、ajax成功関数に何を含めますか？

phpjqueryajaxjsonautocomplete
11
hereiam

JQuery UIのオートコンプリートのリモートデモに固執することができます。 http://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html

結果をオートコンプリートリストに入れるには、ラベルと値を持つオブジェクトをajax成功関数内の応答パラメーター（実際には関数）に配置する必要があります。

source: function( request, response ) {
    $.ajax({
        url: "fill_id.php",
        data: {term: request.term},
        dataType: "json",
        success: function( data ) {
            response( $.map( data.myData, function( item ) {
                return {
                    label: item.title,
                    value: item.turninId
                }
            }));
        }
    });
}

しかし、これはyor fill_id.phpを少し変更した場合にのみ機能します。

// escape your parameters to prevent sql injection
$param   = mysql_real_escape_string($_GET['term']);
$options = array();

// fetch a title for a better user experience maybe..
$db = new SQLite3('database/main.db');
    $results = $db->query("SELECT distinct(turninId), title FROM main WHERE turninid LIKE '".$param."%'");

while ($row_id = $results->fetchArray()) {
    // more structure in data allows an easier processing
    $options['myData'][] = array(
        'turninId' => $row_id['turninId'],
        'title'    => $row_id['title']
    ); 
}

// modify your http header to json, to help browsers to naturally handle your response with
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

echo json_encode($options);

もちろん、テーブルにタイトルなどがない場合は、応答をそのままにして、成功コールバックでIDを繰り返すこともできます。重要なのは、オートコンプリートのresponse関数に値と項目のペアを入力することです。

// this will probably work without modifying your php file at all:
response( $.map( data, function( item ) {
    return {
        label: item,
        value: item
    }
}));

編集：新しいjquery UIのオートコンプリートUIへの参照リンクを更新しました

17
con