jQuery UIオートコンプリートwith json and ajax

Question

ラベルと値のプロパティを持つ配列をJSON経由で渡すことに関して多くの質問がありましたが、文字列を渡すことはあまりありません。私の問題は、私は私のオートコンプリートを満たすように見えることができないということです。私はダンプ機能を実行し、オートコンプリートにJSONを経由して渡されたこれらのサンプル値取得しています：fill_id.phpここ

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

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

されています：ここで

0: 23456 
1: 21111 
2: 25698 

をいくつかのコードだ

$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の成功関数には何が含まれますか？

Answer 1

あなたは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 
       } 
      })); 
     } 
    }); 
} 

しかし、あなたはヨールは少し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への参照リンクを更新し、私はあなたにも満たすことができると考え