jquery ui completamento automatico con database

Question

Sono abbastanza nuovo per JQuery e forse cerco di ottenere qualcosa che potrebbe essere più difficile per un principiante. Tuttavia sto cercando di creare un completamento automatico che invia il valore corrente a uno script PHP e quindi restituisce i valori necessari.

Ecco il mio codice Javascript

$("#login_name").autocomplete({ 
    source: function(request, response) { 
$.ajax({ 
    url: "http://www.myhost.com/myscript.php", 
    dataType: "jsonp", 

    success: function(data) { 
    alert(data); 
    response($.map(data, function(item) { 
     return { 
    label: item.user_login_name, 
    value: item.user_id 
     } 
    })) 
    } 
}) 
    }, 
    minLength: 2 
}); 

E qui è la seconda metà del "myscript.php"

while($row = $Database->fetch(MYSQLI_ASSOC)) 
{ 
    foreach($row as $column=>$val) 
    { 
     $results[$i][$column] = $val; 
    } 
    $i++; 
} 
print json_encode($results); 

che produce il seguente output

[{"user_id":"2","user_login_name":"Name1"},{"user_id":"3","user_login_name":"Name2"},{"user_id":"4","user_login_name":"Name3"},{"user_id":"5","user_login_name":"Name4"},{"user_id":"6","user_login_name":"Name5"},{"user_id":"7","user_login_name":"Name6"}] 

Can

chiunque dimmi dove sto sbagliando, per favore? Inizia a sentirsi piuttosto frustrato. La casella di input diventa "bianca" e non viene mostrata alcuna opzione. Il codice funziona se si specifica una matrice di valori.

UPDATE Ho cambiato il codice e ancora non ho avuto fortuna.

$("#login_name").autocomplete({ 
    source: "/ajax/login_name.php", 
    dataType: "json", 
    minLength: 2, 
    cache: false, 
    select: function(event, ui) { 
     alert(ui); 
    } 
}); 

Utilizzando lo strumento di sviluppo Web di FireFox, viene visualizzato l'errore "b è nullo".

Answer 1

finalmente trovato la soluzione che si adatta alle mie esigenze

$("#login_name").autocomplete({ 
    source: function(request, response){ 
    $.post("/ajax/login_name.php", {data:request.term}, function(data){  
     response($.map(data, function(item) { 
     return { 
      label: item.user_login_name, 
      value: item.user_id 
     } 
     })) 
    }, "json"); 
    }, 
    minLength: 2, 
    dataType: "json", 
    cache: false, 
    focus: function(event, ui) { 
    return false; 
    }, 
    select: function(event, ui) { 
    this.value = ui.item.label; 
    /* Do something with user_id */ 
    return false; 
    } 
}); 

Answer 2

alcuni suggerimenti:

1. Perché dataType= "jsop"? Non sembra essere jsonp. Penso che tu voglia "json".
2. inserire un cache : false nelle opzioni, come bene. Ciò assicura che la richiesta venga sempre effettuata e mai soddisfatta dalla cache sul lato browser.
3. verifica se la chiamata è di uscire, con qualcosa come Fiddler o Charles.
4. Il vostro successo fn ottenere chiamato? Hai un alert() lì. Viene richiamato?
5. se si dispone di Firebug o degli strumenti di sviluppo IE8, è possibile inserire un punto di interruzione su alert() per verificare il valore dei parametri.
6. Perché specificare il pieno nome host nell'URL? Ieri sera ho avuto una situazione strana con completamento automatico in cui la risposta è stata nulla, la stringa vuota, quando ho usato un hostname diverso per la pagina e la richiesta Ajax. Quando l'ho modificato per usare lo stesso hostname, la richiesta è riuscita. In realtà a causa della stessa politica di origine, non dovresti avere alcun nome host nell'URL per la chiamata ajax.

Answer 3

Un'ostruzione JSON è una stringa piatta, mentre map prevede una matrice o una struttura di tipo array. prova a decodificare json sulla stringa prima di usare la mappa.

Answer 4

Sì avete bisogno di informazioni di intestazione per la JSON

 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); 
     header("Last-Modified: " . gmdate("D, d M Y H:i:s") . "GMT"); 
     header("Cache-Control: no-cache, must-revalidate"); 
     header("Pragma: no-cache"); 
     header("Content-type: text/x-json"); 

e tvanfosson rende un buon punto intestano il la spina

in anycase non credo che si effettua la chiamata ajax il plugin fa.

se si è effettivamente utilizzando jquery-ui autocomple si dovrebbe leggere la documentazione ottenere una versione di base in esecuzione.PHP va bene a parte i dati di intestazione mancanti

Answer 5

ho avuto un problema come te. E ora lo aggiusto. Il problema è il mio JSON che restituisce dal mio server contiene un errore di sintassi.

In http://api.jquery.com/jQuery.getJSON/ indica che se c'è qualche errore in JSON, fallirà silenziosamente. Il JSON deve corrispondere allo standard JSON qui http://json.org/.

Per il mio errore è la mia stringa in JSON è il wrapping in una sola citazione. Ma lo standard JSON accetta solo stringhe che si avvolgono tra virgolette.

es. "Hello World" non "Hello World"

Quando lo correggi puoi impostare la sorgente come stringa URL. Il termine sarà nella stringa di query "termine". E funziona !!

Answer 6

Nel caso in cui nessun altro ne ha bisogno:

La documentazione per il completamento automatico in jQuery UI specifica il parametro querystring da usare è 'termine' e non 'q' ... o almeno lo fa ora.

E.g. http://www.myhost.com/myscript.php?term=someToSearchFor 

Answer 7

Simple Jquery ui completamento automatico, per coloro che potrebbero averne bisogno.

//select data from the table 
$search = $db->query('SELECT Title from torrents'); 

//then echo script tags and variables with php 
<?php echo '<script type="text/javascript"> 
$(function() { 
    var availableTags = ['; 
foreach ($search as $k) { 
    echo '"'.$k['Title'].'",'; 
} 
    echo ']; 
$("#tags").autocomplete({ 
    minLength:2, //fires after typing two characters 
    source: availableTags 
}); 
}); 
</script>'; 

?> 

vostro modulo HTML

<div id="search"> 
<form id="search-form"> 
<input id="tags" type="text" /> 
<input type="submit" value="Search" /> 
</form> 
</div>