Completamento dell'interfaccia utente JQuery con json e ajax

Question

Ho visto un sacco di domande relative al passaggio di un array con proprietà label e value tramite JSON, ma non molto sul passaggio stringhe. Il mio problema è che non riesco a riempire il mio completamento automatico. Ho eseguito una funzione di discarica e sono sempre questi i valori dei campioni passati tramite JSON per il completamento automatico:

0: 23456 
1: 21111 
2: 25698 

ecco qualche codice:

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

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

Qui è 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); 

mio il completamento automatico rimane vuoto. Come posso cambiare il mio array JSON per riempirlo? O cosa includo nella mia funzione di successo ajax?

Answer 1

Si può attaccare molto per la demo a distanza di Autocomplete di jQuery UI: http://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html

Per ottenere i risultati nella lista compilato automaticamente, è necessario mettere un oggetto con un'etichetta e un valore al parametro di risposta (che è in realtà una funzione) all'interno della vostra funzione di successo 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 
       } 
      })); 
     } 
    }); 
} 

Ma questo funziona solo se si modifica yor fill_id.php un po ':

// 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); 

Ovviamente, quando non hai un titolo o qualcosa nel tuo tavolo, puoi anche lasciare la tua risposta così com'è e ripetere l'id nella tua callback di successo. Importante è, che si riempiono la funzione response nel completamento automatico con una coppia di valori/item:

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

edit: aggiornato il link di riferimento alla nuova jquery del UI autocomplete ui