In questo post vediamo come effettuare un autocompletamento utilizzando jquery e con la chiamata Ajax ad una classe Java per il recupero delle occorrenze.
La pagina html si compone di un form con 2 text box nome e cognome, digitando il cognome dal secondo carattere in poi parte la chiamata Ajax che suggerisce sotto la lista dei nominativi che iniziano con quelle lettere.
I nominativi proposti sono sotto forma di cognome/nome, alla selezione di ognuno di essi è invocato un metodo javascript che splitta la stringa e inserisce il nome nella casella di testo del nome e il cognome in quella del cognome.
Ho utilizzato jquery versione 1.3.2.
Il metodo autocomplete è il seguente:
$("#cognome").autocomplete("data.jsp",{minChars: 2,onItemSelect: function(item) {
var text = item.innerHTML;
var splitResult=text.split(" ");
var nom=splitResult[1];
var cog=splitResult[0];
document.getElementById("nome").value=nom;
document.getElementById("cognome").value=cog;
$("#testoProva").html(text);
}});
Data.jsp è la pagina java che torna i dati in formato stringa, tra parentesi graffe si possono specificare varie proprietà del metodo, in questo caso la minLength che indica dopo quante lettere si dovrà effettuare la chiamata e l' onItemSelect che ci dice cosa fare una volta che dalla lista di proposte di nominativi se ne sceglie uno.
Di seguito incollo il codice
index.jsp
data.jsp
Caricamento.java (classe che simula accesso al db)
La pagina html si compone di un form con 2 text box nome e cognome, digitando il cognome dal secondo carattere in poi parte la chiamata Ajax che suggerisce sotto la lista dei nominativi che iniziano con quelle lettere.
I nominativi proposti sono sotto forma di cognome/nome, alla selezione di ognuno di essi è invocato un metodo javascript che splitta la stringa e inserisce il nome nella casella di testo del nome e il cognome in quella del cognome.
Ho utilizzato jquery versione 1.3.2.
Il metodo autocomplete è il seguente:
$("#cognome").autocomplete("data.jsp",{minChars: 2,onItemSelect: function(item) {
var text = item.innerHTML;
var splitResult=text.split(" ");
var nom=splitResult[1];
var cog=splitResult[0];
document.getElementById("nome").value=nom;
document.getElementById("cognome").value=cog;
$("#testoProva").html(text);
}});
Data.jsp è la pagina java che torna i dati in formato stringa, tra parentesi graffe si possono specificare varie proprietà del metodo, in questo caso la minLength che indica dopo quante lettere si dovrà effettuare la chiamata e l' onItemSelect che ci dice cosa fare una volta che dalla lista di proposte di nominativi se ne sceglie uno.
Di seguito incollo il codice
index.jsp
<html>
<head>
<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css"></link>
<script src="js/jquery_1.3.2_min.js" type="text/javascript"></script>
<script src="js/jquery.autocomplete.js"></script>
<style>
input {
font-size: 120%;
}
</style>
</head>
<body>
<h3>
Nome</h3>
<input id="nome" name="nome" type="text" />
<h3>
Cognome</h3>
<input id="cognome" name="cognome" type="text" />
<div id="testoProva">
</div>
<script>
$("#cognome").autocomplete("data.jsp",{minChars: 2,onItemSelect: function(item) {
var text = item.innerHTML;
var splitResult=text.split(" ");
var nom=splitResult[1];
var cog=splitResult[0];
document.getElementById("nome").value=nom;
document.getElementById("cognome").value=cog;
$("#testoProva").html(text);
}});
</script>
</body>
</html>
data.jsp
<%@page import="it.db.Caricamento"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%
Caricamento db = new Caricamento();
String query = request.getParameter("q");
List<String> nomi = db.getData(query);
Iterator<String> iterator = nomi.iterator();
while(iterator.hasNext()) {
String nome = (String)iterator.next();
out.println(nome);
}
%>
Caricamento.java (classe che simula accesso al db)
package it.db;
import java.util.*;
public class Caricamento {
private int totale;
private String nomi = "Zegna Mario Alberto,Zorro Marco,Abate Matteo,Abatino Carlo,Sgarbi Vittorio,Selvaggio Mario";
private List<String> nomiL;
public Caricamento() {
nomiL= new ArrayList<String>();
StringTokenizer st = new StringTokenizer(nomi, ",");
while(st.hasMoreTokens()) {
nomiL.add(st.nextToken().trim());
}
totale = nomiL.size();
}
public List<String> getData(String query) {
String nom= null;
query = query.toLowerCase();
List<String> matched = new ArrayList<String>();
for(int i=0; i<totale; i++) {
nom= countries.get(i).toLowerCase();
if(nom.startsWith(query)) {
matched.add(nomiL.get(i));
}
}
return matched;
}
}
Nessun commento:
Posta un commento