1. Laden Sie jquery-latest.js, JSuggest.js und JSuggest.css herunter
Der Quellcode von JSuggest.js lautet wie folgt
Kopieren Sie den Codecode wie folgt:
/**
*
* Beschreibung: JSuggest-Dropdown-Eingabeaufforderungsfeld
*/
Funktion JSuggest(){
// DIV-Dropdown-Feld
this.div = null;
//ul unter DIV
this.ul = null;
//Texteingabefeld
this.input = null;
// LI-Objekt, das vom aktuellen DIV ausgewählt wird
this.current_li = null;
/**
* Dropdown-Eingabeaufforderungsfeld ausblenden
*/
this.hide = function(){
this.div.style.visibility = "hidden";
}
/**
* Dropdown-Eingabeaufforderungsfeld anzeigen
*/
this.show = function(){
this.div.style.visibility = "sichtbar";
}
/**
* Status des Dropdown-Eingabefelds
*/
this.status = function(){
if (this.div.style.visibility == "visible"){
return true;
}
return false;
}
/**
* Stellen Sie den vom aktuellen DIV ausgewählten LI ein
*/
this.setCurrent_li = function(li, obj){
var co = obj.current_li;
if (co != null){
co.className = "";
}
li.className = "li_index";
obj.current_li = li;
}
/**
* Vorschlag initialisieren
*
* input_id: ID des Eingabefelds
* defHeight: die Höhe des Dropdown-Eingabeaufforderungsfelds (Sie können diese auch nicht angeben)
*/
this.init = function(input_id, defHeight){
this.input = document.getElementById(input_id);
//this.input.autocomplete = "off";
var left = this.input.offsetLeft;
var top = this.input.offsetTop;
var width = this.input.offsetWidth;
var height = this.input.offsetHeight;
var p=this.input.offsetParent;
while(p!= null){
left+=p.offsetLeft;
top+=p.offsetTop;
p=p.offsetParent;
}
oben+= Höhe;
if(defHeight==null || defHeight==0){
Höhe = 150;
}anders{
height = defHeight;
}
this.input.value = "";
var obj = dies;
this.input.onkeydown = function(evt){
obj.onkeydown(evt, obj);
}
this.div = document.createElement("div");
this.div.style.width = Breite + „px“;
this.div.style.height = Höhe + „px“;
this.div.style.left = left + "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);
}
/**
* Entfernen Sie alle LI in UL unter DIV
*/
this.remove = function(){
this.current_li = null;
while(this.removeLI());
}
/**
* LI in UL unter DIV entfernen
*/
this.removeLI = function(){
var node = this.ul.childNodes;
for(var n im Knoten){
if (node[n] != null && node[n].nodeName == "LI"){
// alarm(node[n].innerHTML);
this.ul.removeChild(node[n]);
return true;
}
}
return false;
}
/**
* LI in DIV erstellen
*/
this.create = function(items){
this.remove();
var li_item = items.split(",");
for(var i in li_item){
//alert(li_item[i]);
var li = document.createElement("li");
li.innerHTML = li_item[i];
var obj = dies;
li.onmousedown = function(){
obj.onmousedown(this, obj);
}
li.onmouseover = this.onmouseover;
li.onmouseout = this.onmouseout;
this.ul.appendChild(li);
}
this.show();
}
/**
* Textfeld-Presseereignis
*/
this.onkeydown = function(evt, obj){
if (!obj.status()){
return false;
}
if (!evt && window.event)
{
evt = window.event;
}
var key = evt.keyCode;
//var KEYUP = 38;
//var KEYDOWN = 40;
//var KEYENTER = 13;
var ob = obj;
if (key == 38){
obj.upKeySelected();
}else if (key == 40){
obj.downKeySelected();
}else if (key == 13 || key == 27){
obj.hide();
}
}
this.getCurrentLiIndex = function(){
if(this.current_li == null){
return -1;
}
var node = this.ul.childNodes;
for(var n im Knoten){
if (node[n].nodeName == "LI"){
if(node[n] == this.current_li){
Rückkehr n;
}
}
}
}
this.getLi = function(index){
var node = this.ul.childNodes;
for(var n im Knoten){
if (node[n].nodeName == "LI" && n == index){
this.setCurrent_li(node[n], this);
return node[n];
}
}
}
this.upKeySelected = function(){
var num = this.getCurrentLiIndex();
if (num != -1 && num > 0){
num--;
var node = this.getLi(num);
this.setCurrent_li(node, this);
this.input.value = node.innerHTML;
}
}
this.downKeySelected = function(obj){
var num = this.getCurrentLiIndex();
if (num == -1){
Anzahl = 0;
}anders {
num++;
if (num >= this.ul.childNodes.length)return false;
}
var node = this.getLi(num);
this.setCurrent_li(node, this);
this.input.value = node.innerHTML;
}
/**
* DIV-Maus-Druck-Ereignis
*/
this.onmousedown = function(thiz, obj){
obj.setCurrent_li(thiz, obj);
obj.input.value = thiz.innerHTML;
obj.hide();
}
/**
* DIV-Mausbewegungsereignis
*/
this.onmouseover = function(){
if (this.className != "li_index"){
this.className = "li_check";
}
}
/**
* DIV-Maus-Out-Ereignis
*/
this.onmouseout = function(){
if (this.className == "li_check"){
this.className = "";
}
}
}
var jsuggest = new JSuggest();
2.jsp-Seite
Kopieren Sie den Codecode wie folgt:
<input id="text" name="text" type="text" onkeyup="go(event, this.value);"/>
<script type="text/javascript">
j(document).ready(function(){
//JSUGGEST initialisieren
jsuggest.init("text");
//Oder verwenden Sie die folgende Methode, um die Höhe des Dropdown-Felds festzulegen
//jsuggest.init("text",200);
})
Funktion go(event, value){
event= event ? event : (window.event ? window.event : arguments[0]);
var url = "url?suggestInput="+encodeURIComponent(value);//url ist eine bestimmte Aktion oder JSP-Adresse usw. und der Rückgabewert ist eine durch Kommas getrennte Zeichenfolge
goSuggestInput(event,url,value);
}
Funktion goSuggestInput(evnet,url,value){
if (value == ""){
//Das Dropdown-Feld ausblenden, wenn das Eingabefeld leer ist
jsuggest.hide();
return false;
}
// Stellen Sie sicher, dass evt ein gültiges Ereignis ist
if (!evnet && window.event)
{
evnet = window.event;
}
var key = evnet.keyCode;
if (key == 38 || key == 40 || key == 13 || key == 27){
return false;
}
j.ajax({
Typ: „Beitrag“,
URL:URL,
Datentyp: „Text“,
Cache: „falsch“,
beforeSend: function(XMLHttpRequest){
},
Erfolg: function(data, textStatus){
//Daten zum Dropdown-Feld hinzufügen
jsuggest.create(data);
},
vollständig: function(XMLHttpRequest, textStatus){
},
Fehler: Funktion(){
alarm("Entschuldigung, der Server ist beschäftigt!");
}
});
}
</script>