L'HTML ha l'attributo autcomplete impostato di default a true che fa in modo che i campi di un form si autocompletino con i valori salvati nel browser.
In un form ho la necessità che il campo password non si autcompleti.
Ma autocomplete="false" non basta.
Se vogliamo impostare l'autocomplete di un form a off, in modo che non visualizzi eventuali dati salvati, ci basta fare questo:
<form method="post" action="" autocomplete="off">
<div>
<label>Email:</label>
<input type="email" name="email" value="" placeholder="Email">
</div>
<div>
<label>Password:</label>
<input type="password" name="password" value="">
</div>
<button type="submit" name="btn">Salva</button>
</form>
Oppure possiamo impostarlo un campo specifico:
<form method="post" action="">
<div>
<label>Email:</label>
<input type="email" name="email" value="" placeholder="Email" autocomplete="off">
</div>
<div>
<label>Password:</label>
<input type="password" name="password" value="">
</div>
<button type="submit" name="btn">Salva</button>
</form>
Il problema è che su Chrome (e Chromium) questo non funziona benissimo.
Per creare una lista autocomplete, in genere uso jQuery UI Autocomplete.
Non solo perchè mi ci trovo bene, ma anche perchè comunque jQuery UI lo uso a prescindere.
Ma ho trovato un'altra libreria molto semplice da usare: Awesocomplete!
Non ha dipendenze esterne, quindi basta includere la libreria e impostare la pagina.
Vediamo un pò di esempi.
Google Maps lo conosciamo tutti!
E prima o poi tutti i web developer si scontrano con l'autocomplete.
Oggi vediamo come unire le due cose: il risultato sarà una pagina con Google Maps e una casella per l'autocomplete, con i dati presi nel database di Google Maps.
Per fare questo useremo un plugin jQuery apposito: Geocomplete!
Faremo un esempio completo con queste funzionalità:
AutoCompleteTextView è un componente che in pratica si comporta come Google Suggest.
Oggi vediamo come usarlo, e per complicarci la vita, prenderemo in dati in formato JSON da un servizio remoto, e useremo un custom adapter.
Cominciamo con la classe che mappa i dati JSON:
public class Cities {
private int id;
private String nome;
private String paese;
private double latitudine;
private double longitudine;
public Cities(int id, String nome) {
this.id = id;
this.nome = nome;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getNome() {
return nome;
}
public void setNome(String nome) {
this.nome = nome;
}
public String getPaese() {
return paese;
}
public void setPaese(String paese) {
this.paese = paese;
}
public double getLatitudine() {
return latitudine;
}
public void setLatitudine(double latitudine) {
this.latitudine = latitudine;
}
public double getLongitudine() {
return longitudine;
}
public void setLongitudine(double longitudine) {
this.longitudine = longitudine;
}
}
I i campi JSON quindi sono:
L'ultima versione di jQuery ci mette a disposizione l'autocomplete.
In pratica in una casella di testo possiamo ottenere l'autocompletamento della ricerca, tipo Google per intenderci.
Metterlo in pratica è molto facile.
Per capire il funzionamento base guardate l'esempio sulla pagina ufficiale.
Noi passeremo direttamente a caricare i risultati prendendoli da PHP e MySQL.
Come al solito per prima cosa carichiamo il necessario:
<link type="text/css" rel="stylesheet" href="template/css/smoothness/jquery-ui-1.8.19.custom.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.19.custom.min.js"></script>
Nel mio caso sto usando il tema Smoothness.
E' indispensabile avere le ultime versioni sia di jQuery che di jQuery UI.
Poi passiamo alla parte PHP/MySQL.
Create una pagina che dovrà eseguire una query e trasformare l'output in JSON.
Io ho usato PDO:
$dbhost = 'YOUR_SERVER';
$dbuser = 'YOUR_USERNAME';
$dbpass = 'YOUR_PASSWORD';
$dbname = 'YOUR_DATABASE_NAME';
try {
$conn = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
} catch(PDOException $e) {
echo $e->getMessage();
}
$cmd = 'SELECT * FROM articoli WHERE articolo_codice LIKE :term GROUP BY articolo_codice ORDER BY articolo_codice';
$term = "%" . $_GET['term'] . "%";
$result = $conn->prepare($cmd);
$result->bindValue(":term", $term);
$result->execute();
$arrayArticoli = array();
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$rowArray['label'] = $row['articolo_codice'];
$rowArray['value'] = $row['articolo_codice'];
array_push($arrayArticoli, $rowArray);
}
$conn = NULL;
echo json_encode($arrayArticoli);
Ho usato PDO perchè mi piace di più, ma potete usare quello che volete.