1. Téléchargez jquery-latest.js, JSuggest.js et JSuggest.css
Le code source de JSuggest.js est le suivant
Copiez le code comme suit :
/**
*
* Description : boîte d'invite déroulante JSuggest
*/
fonction JSuggest(){
// Liste déroulante DIV
this.div = null ;
//ul sous DIV
this.ul = nul ;
// Zone de saisie de texte
this.input = null ;
// Objet LI sélectionné par le DIV actuel
this.current_li = null ;
/**
* Masquer la boîte de dialogue déroulante
*/
this.hide = fonction(){
this.div.style.visibility = "caché" ;
}
/**
* Afficher la boîte de dialogue déroulante
*/
this.show = fonction(){
this.div.style.visibility = "visible";
}
/**
* État de la boîte de dialogue déroulante
*/
this.status = fonction(){
if (this.div.style.visibility == "visible"){
renvoie vrai ;
}
renvoie faux ;
}
/**
* Définir le LI sélectionné par le DIV actuel
*/
this.setCurrent_li = fonction(li, obj){
var co = obj.current_li;
si (co != nul){
co.className = "";
}
li.className = "li_index";
obj.current_li = li;
}
/**
* Initialiser la suggestion
*
* input_id : ID de la zone de saisie
* defHeight : la hauteur de la boîte de dialogue déroulante (vous pouvez également ne pas la fournir)
*/
this.init = function(input_id, defHeight){
this.input = document.getElementById(input_id);
//this.input.autocomplete = "off";
var gauche = this.input.offsetLeft;
var top = this.input.offsetTop;
var width = this.input.offsetWidth;
var hauteur = this.input.offsetHeight;
var p=this.input.offsetParent;
pendant que(p!= nul){
left+=p.offsetLeft;
top+=p.offsetTop;
p=p.offsetParent;
}
haut+= hauteur ;
si(defHeight==null || defHeight==0){
hauteur = 150 ;
}autre{
hauteur = defHauteur ;
}
this.input.value = "";
var obj = ceci ;
this.input.onkeydown = fonction (evt){
obj.onkeydown(evt, obj);
}
this.div = document.createElement("div");
this.div.style.width = largeur + "px" ;
this.div.style.height = hauteur + "px" ;
this.div.style.left = gauche + "px" ;
this.div.style.top = top + "px" ;
this.ul = document.createElement("ul");
this.div.appendChild(this.ul);
this.div.className = "jsuggest" ;
document.body.appendChild(this.div);
}
/**
* Supprimez tous les LI dans UL sous DIV
*/
this.remove = fonction(){
this.current_li = null ;
while(this.removeLI());
}
/**
* Supprimer LI dans UL sous DIV
*/
this.removeLI = fonction(){
var node = this.ul.childNodes;
pour(var n dans le nœud){
if (node[n] != null && node[n].nodeName == "LI"){
// alerte(node[n].innerHTML);
this.ul.removeChild(noeud[n]);
renvoie vrai ;
}
}
renvoie faux ;
}
/**
* Créer LI en DIV
*/
this.create = fonction (articles) {
this.remove();
var li_item = items.split(",");
pour(var i dans li_item){
//alerte(li_item[i]);
var li = document.createElement("li");
li.innerHTML = li_item[i];
var obj = ceci ;
li.onmousedown = fonction(){
obj.onmousedown(this, obj);
}
li.onmouseover = this.onmouseover;
li.onmouseout = this.onmouseout;
this.ul.appendChild(li);
}
this.show();
}
/**
* Événement presse zone de texte
*/
this.onkeydown = fonction (evt, obj){
si (!obj.status()){
renvoie faux ;
}
si (!evt && window.event)
{
evt = fenêtre.event;
}
var clé = evt.keyCode;
//var KEYUP = 38;
//var KEYDOWN = 40 ;
//var KEYENTER = 13;
var ob = obj;
si (clé == 38){
obj.upKeySelected();
}sinon si (clé == 40){
obj.downKeySelected();
}sinon si (clé == 13 || clé == 27){
obj.hide();
}
}
this.getCurrentLiIndex = fonction(){
si(this.current_li == null){
renvoie -1 ;
}
var node = this.ul.childNodes;
pour(var n dans le nœud){
if (node[n].nodeName == "LI"){
if(node[n] == this.current_li){
retourner n ;
}
}
}
}
this.getLi = fonction (index) {
var node = this.ul.childNodes;
pour(var n dans le nœud){
if (node[n].nodeName == "LI" && n == index){
this.setCurrent_li(node[n], this);
renvoyer le nœud[n] ;
}
}
}
this.upKeySelected = fonction(){
var num = this.getCurrentLiIndex();
si (num != -1 && num > 0){
num--;
var node = this.getLi(num);
this.setCurrent_li(nœud, ceci);
this.input.value = node.innerHTML ;
}
}
this.downKeySelected = fonction(obj){
var num = this.getCurrentLiIndex();
si (num == -1){
nombre = 0 ;
}autre {
num++;
if (num >= this.ul.childNodes.length)return false ;
}
var node = this.getLi(num);
this.setCurrent_li(nœud, ceci);
this.input.value = node.innerHTML ;
}
/**
* Événement de presse souris DIV
*/
this.onmousedown = fonction(thiz, obj){
obj.setCurrent_li(thiz, obj);
obj.input.value = thiz.innerHTML;
obj.hide();
}
/**
* Événement de mouvement de souris DIV
*/
this.onmouseover = fonction(){
if (this.className != "li_index"){
this.className = "li_check" ;
}
}
/**
* Événement DIV avec souris
*/
this.onmouseout = fonction(){
if (this.className == "li_check"){
this.className = "" ;
}
}
}
var jsuggest = new JSuggest();
Page 2.jsp
Copiez le code comme suit :
<input id="text" name="text" type="text" onkeyup="go(event, this.value);"/>
<script type="text/javascript">
j(document).ready(function(){
//Initialiser JSUGGEST
jsuggest.init("texte");
//Ou utilisez la méthode suivante pour définir la hauteur de la liste déroulante
//jsuggest.init("texte",200);
})
fonction go(événement, valeur){
event= event ? event : (window.event ? window.event : arguments[0]);
var url = "url?suggestInput="+encodeURIComponent(value);//url est une action spécifique ou une adresse jsp, etc., et la valeur de retour est une chaîne séparée par des virgules
goSuggestInput(événement,url,valeur);
}
fonction goSuggestInput(evnet,url,valeur){
si (valeur == ""){
//Masquer la liste déroulante si la zone de saisie est vide
jsuggest.hide();
renvoie faux ;
}
// Assurez-vous que evt est un événement valide
si (!evnet && window.event)
{
evnet = window.event;
}
var clé = evnet.keyCode;
if (clé == 38 || clé == 40 || clé == 13 || clé == 27){
renvoie faux ;
}
j.ajax({
tapez : "poster",
URL:url,
Type de données : "texte",
cache : "faux",
avantEnvoi : fonction(XMLHttpRequest){
},
succès : fonction (données, textStatus) {
//Ajouter des données à la liste déroulante
jsuggest.create(données);
},
complet : fonction (XMLHttpRequest, textStatus) {
},
erreur : fonction(){
alert("Désolé, le serveur est occupé !");
}
});
}
</script>