JQuery UI自動完成與json和ajax

Question

我見過很多問題處理通過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成功函數中包含什麼？

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的自動完成界面