1. Baixe jquery-latest.js, JSuggest.js e JSuggest.css
O código fonte do JSuggest.js é o seguinte
Copie o código do código da seguinte forma:
/**
*
* Descrição: caixa de prompt suspensa JSuggest
*/
função JSuggest(){
//caixa suspensa DIV
isto.div = nulo;
//ul sob DIV
isto.ul = nulo;
//caixa de entrada de texto
esta.input = null;
// objeto LI selecionado pelo DIV atual
this.current_li = null;
/**
* Ocultar caixa suspensa de prompt
*/
isto.ocultar=função(){
this.div.style.visibility = "oculto";
}
/**
* Mostrar caixa suspensa de prompt
*/
isto.mostrar = função(){
this.div.style.visibility = "visível";
}
/**
* Status da caixa de prompt suspensa
*/
este.status = função(){
if (this.div.style.visibility == "visível"){
retornar verdadeiro;
}
retornar falso;
}
/**
* Defina o LI selecionado pelo DIV atual
*/
this.setCurrent_li = função (li, obj){
var co = obj.current_li;
if (co != nulo){
co.className = "";
}
li.className = "li_index";
obj.current_li = li;
}
/**
* Inicializar sugestão
*
* input_id: ID da caixa de entrada
* defHeight: a altura da caixa suspensa de prompt (você também não pode fornecê-la)
*/
this.init = function(input_id, defHeight){
this.input = document.getElementById(input_id);
//this.input.autocomplete = "desligado";
var esquerda = this.input.offsetLeft;
var topo = this.input.offsetTop;
var largura = this.input.offsetWidth;
var altura = this.input.offsetHeight;
var p=this.input.offsetParent;
enquanto(p!=nulo){
esquerda+=p.offsetLeft;
topo+=p.offsetTop;
p=p.offsetParent;
}
topo+= altura;
if(defHeight==nulo || defHeight==0){
altura = 150;
}outro{
altura = defAltura;
}
this.input.value = "";
var obj = isto;
this.input.onkeydown=função(evt){
obj.onkeydown(evt, obj);
}
this.div = document.createElement("div");
this.div.style.width = largura + "px";
this.div.style.height = altura + "px";
this.div.style.left = esquerda + "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);
}
/**
* Remova todos os LI em UL em DIV
*/
isto.remove=função(){
this.current_li = null;
while(this.removeLI());
}
/**
* Remova LI em UL em DIV
*/
this.removeLI = function(){
var nó = this.ul.childNodes;
for(var n no nó){
if (node[n] != null && node[n].nodeName == "LI"){
// alerta(node[n].innerHTML);
this.ul.removeChild(nó[n]);
retornar verdadeiro;
}
}
retornar falso;
}
/**
* Crie LI em DIV
*/
this.create = function(itens){
this.remove();
var li_item = itens.split(",");
for(var i in li_item){
//alerta(li_item[i]);
var li = document.createElement("li");
li.innerHTML = li_item[i];
var obj = isto;
li.onmousedown=função(){
obj.onmousedown(este, obj);
}
li.onmouseover = this.onmouseover;
li.onmouseout = this.onmouseout;
this.ul.appendChild(li);
}
this.show();
}
/**
* Evento de imprensa em caixa de texto
*/
this.onkeydown = função (evt, obj){
se (!obj.status()){
retornar falso;
}
if (!evt && window.event)
{
evt = janela.evento;
}
var chave = evt.keyCode;
//var KEYUP = 38;
//var KEYDOWN = 40;
//var KEYENTER = 13;
var ob = obj;
se (chave == 38){
obj.upKeySelected();
}else if (chave == 40){
obj.downKeySelected();
}else if (chave == 13 || chave == 27){
obj.ocultar();
}
}
this.getCurrentLiIndex = function(){
if(this.current_li == null){
retornar -1;
}
var nó = this.ul.childNodes;
for(var n no nó){
if (node[n].nodeName == "LI"){
if(nó[n] == this.current_li){
retornar n;
}
}
}
}
this.getLi = função(índice){
var nó = this.ul.childNodes;
for(var n no nó){
if (node[n].nodeName == "LI" && n == índice){
this.setCurrent_li(nó[n], this);
nó de retorno[n];
}
}
}
this.upKeySelected = function(){
var num = this.getCurrentLiIndex();
if (num != -1 && num > 0){
num--;
var nó = this.getLi(num);
this.setCurrent_li(nó, este);
this.input.value = node.innerHTML;
}
}
this.downKeySelected=função(obj){
var num = this.getCurrentLiIndex();
se (num == -1){
num = 0;
}outro {
num++;
if (num >= this.ul.childNodes.length) retornar falso;
}
var nó = this.getLi(num);
this.setCurrent_li(nó, este);
this.input.value = node.innerHTML;
}
/**
* Evento de pressionamento do mouse DIV
*/
this.onmousedown = function(thiz, obj){
obj.setCurrent_li(thiz, obj);
obj.input.value = thiz.innerHTML;
obj.ocultar();
}
/**
* Evento de movimento do mouse DIV
*/
this.onmouseover=função(){
if (this.className != "li_index"){
this.className = "li_check";
}
}
/**
* Evento DIV de saída do mouse
*/
this.onmouseout=função(){
if (this.className == "li_check"){
this.className = "";
}
}
}
var jsuggest = new JSuggest();
Página 2.jsp
Copie o código do código da seguinte forma:
<input id="text" name="text" type="text" onkeyup="go(event, this.value);"/>
<script type="texto/javascript">
j(documento).ready(function(){
//Inicializa JSUGGEST
jsuggest.init("texto");
//Ou use o método a seguir para definir a altura da caixa suspensa
//jsuggest.init("texto",200);
})
função go(evento, valor){
evento = evento? evento: (janela.evento? janela.evento: argumentos[0]);
var url = "url?suggestInput="+encodeURIComponent(value);//url é uma ação específica ou endereço jsp, etc., e o valor de retorno é uma string separada por vírgula
goSuggestInput(evento,url,valor);
}
função goSuggestInput(evnet,url,valor){
if (valor == ""){
//Oculta a caixa suspensa se a caixa de entrada estiver vazia
jsuggest.hide();
retornar falso;
}
// Certifique-se de que evt seja um evento válido
if (!evnet && window.event)
{
evnet = janela.evento;
}
var chave = evnet.keyCode;
if (chave == 38 || chave == 40 || chave == 13 || chave == 27){
retornar falso;
}
j.ajax({
digite: "postagem",
url:url,
tipo de dados: "texto",
cache: "falso",
beforeSend: function(XMLHttpRequest){
},
sucesso: function(dados, textStatus){
//Adiciona dados à caixa suspensa
jsuggest.create(dados);
},
completo: function(XMLHttpRequest, textStatus){
},
erro: função(){
alert("Desculpe, o servidor está ocupado!");
}
});
}
</script>