1. Descargue jquery-latest.js, JSuggest.js y JSuggest.css
El código fuente de JSuggest.js es el siguiente
Copie el código de código de la siguiente manera:
/**
*
* Descripción: cuadro de aviso desplegable JSuggest
*/
función JSugerir(){
// cuadro desplegable DIV
this.div = nulo;
//ul bajo DIV
this.ul = nulo;
//Cuadro de entrada de texto
this.entrada = nulo;
// objeto LI seleccionado por el DIV actual
this.current_li = nulo;
/**
* Ocultar cuadro desplegable
*/
this.ocultar = función(){
this.div.style.visibility = "oculto";
}
/**
* Mostrar cuadro de aviso desplegable
*/
this.mostrar = función(){
this.div.style.visibility = "visible";
}
/**
* Estado del cuadro de aviso desplegable
*/
this.status = función(){
si (this.div.style.visibility == "visible"){
devolver verdadero;
}
devolver falso;
}
/**
* Establecer el LI seleccionado por el DIV actual
*/
this.setCurrent_li = función(li, obj){
var co = obj.current_li;
si (co != nulo){
co.className = "";
}
li.className = "li_index";
obj.current_li = li;
}
/**
* Inicializar sugerencia
*
* input_id: ID del cuadro de entrada
* defHeight: la altura del cuadro desplegable (tampoco puede proporcionarla)
*/
this.init = función(input_id, defHeight){
this.input = document.getElementById(input_id);
//this.input.autocomplete = "apagado";
var izquierda = this.input.offsetLeft;
var superior = this.input.offsetTop;
ancho var = this.input.offsetWidth;
var altura = this.input.offsetHeight;
var p=this.input.offsetParent;
mientras(p!= nulo){
izquierda+=p.offsetLeft;
arriba+=p.offsetTop;
p=p.offsetParent;
}
arriba+= altura;
si(alturadef==null || alturadef==0){
altura = 150;
}demás{
altura = defAltura;
}
this.input.value = "";
var obj = esto;
this.input.onkeydown = función(evt){
obj.onkeydown(evt, obj);
}
this.div = document.createElement("div");
this.div.style.width = ancho + "px";
this.div.style.height = altura + "px";
this.div.style.left = izquierda + "px";
this.div.style.top = arriba + "px";
this.ul = document.createElement("ul");
this.div.appendChild(this.ul);
this.div.className = "jsuggest";
document.body.appendChild(este.div);
}
/**
* Eliminar todo LI en UL bajo DIV
*/
this.remove = función(){
this.current_li = nulo;
mientras(this.removeLI());
}
/**
* Eliminar LI en UL bajo DIV
*/
this.removeLI = función(){
nodo var = this.ul.childNodes;
for(var n en nodo){
if (nodo[n]!= nulo && nodo[n].nombrenodo == "LI"){
// alerta(nodo[n].innerHTML);
this.ul.removeChild(nodo[n]);
devolver verdadero;
}
}
devolver falso;
}
/**
* Crear LI en DIV
*/
this.create = función(elementos){
this.remove();
var li_item = artículos.split(",");
para(var i en li_item){
//alerta(li_item[i]);
var li = document.createElement("li");
li.innerHTML = li_item[i];
var obj = esto;
li.onmousedown = función(){
obj.onmousedown(esto, obj);
}
li.onmouseover = this.onmouseover;
li.onmouseout = this.onmouseout;
this.ul.appendChild(li);
}
this.mostrar();
}
/**
* Evento de prensa de cuadro de texto
*/
this.onkeydown = función(evt, obj){
si (!obj.status()){
devolver falso;
}
si (!evt && ventana.evento)
{
evt = ventana.evento;
}
clave var = evt.keyCode;
//var TECLA = 38;
//var TECLA = 40;
//var KEYENTER = 13;
var ob = obj;
si (clave == 38){
obj.upKeySelected();
}si no (clave == 40){
obj.downKeySelected();
}de lo contrario si (clave == 13 || clave == 27){
obj.ocultar();
}
}
this.getCurrentLiIndex = función(){
si(this.current_li == nulo){
devolver -1;
}
nodo var = this.ul.childNodes;
for(var n en nodo){
si (nodo[n].nombrenodo == "LI"){
if(nodo[n] == this.current_li){
devolver n;
}
}
}
}
this.getLi = función(índice){
nodo var = this.ul.childNodes;
for(var n en nodo){
if (nodo[n].nodeName == "LI" && n == índice){
this.setCurrent_li(nodo[n], esto);
nodo de retorno [n];
}
}
}
this.upKeySelected = función(){
var número = this.getCurrentLiIndex();
si (núm! = -1 && número > 0){
número--;
nodo var = this.getLi(num);
this.setCurrent_li(nodo, esto);
this.input.value = nodo.innerHTML;
}
}
this.downKeySelected = función(obj){
var número = this.getCurrentLiIndex();
si (núm == -1){
número = 0;
}demás {
número++;
si (num >= this.ul.childNodes.length) devuelve falso;
}
nodo var = this.getLi(num);
this.setCurrent_li(nodo, esto);
this.input.value = nodo.innerHTML;
}
/**
* Evento de pulsación del ratón DIV
*/
this.onmousedown = función(thiz, obj){
obj.setCurrent_li(thiz, obj);
obj.input.value = thiz.innerHTML;
obj.ocultar();
}
/**
* Evento de movimiento del mouse DIV
*/
this.onmouseover = función(){
si (this.className! = "li_index"){
this.className = "li_check";
}
}
/**
* Evento de eliminación del mouse DIV
*/
this.onmouseout = función(){
si (this.className == "li_check"){
this.className = "";
}
}
}
var jsuggest = nuevo JSuggest();
2.página jsp
Copie el código de código de la siguiente manera:
<input id="texto" nombre="texto" tipo="texto" onkeyup="go(evento, este.valor);"/>
<tipo de script="texto/javascript">
j(documento).listo(función(){
//Inicializa JSUGGEST
jsuggest.init("texto");
//O utilice el siguiente método para establecer la altura del cuadro desplegable
//jsuggest.init("texto",200);
})
función ir (evento, valor) {
evento = evento? evento: (ventana.evento? ventana.evento: argumentos [0]);
var url = "url?suggestInput="+encodeURIComponent(value);//url es una acción específica o dirección jsp, etc., y el valor de retorno es una cadena separada por comas
goSuggestInput(evento,url,valor);
}
función goSuggestInput(evnet,url,valor){
si (valor == ""){
//Ocultar el cuadro desplegable si el cuadro de entrada está vacío
jsuggest.ocultar();
devolver falso;
}
//Asegúrate de que evt sea un evento válido
si (!evnet && ventana.evento)
{
evnet = ventana.evento;
}
clave var = evnet.keyCode;
si (clave == 38 || clave == 40 || clave == 13 || clave == 27){
devolver falso;
}
j.ajax({
tipo: "publicación",
URL: URL,
tipo de datos: "texto",
caché: "falso",
antes de enviar: función (XMLHttpRequest) {
},
éxito: función (datos, estado de texto) {
//Añadir datos al cuadro desplegable
jsuggest.create(datos);
},
completo: función (XMLHttpRequest, textStatus) {
},
error: función(){
alert("Lo sentimos, ¡el servidor está ocupado!");
}
});
}
</script>