Dropdown-Menü globalen Variablenbereich reduzieren

Question

Wie kann die globale Variable "x" im Bereich auf lokale Variable reduziert werden? Bitte beachten Sie, dass das Verschieben des "var x" innerhalb der "showAddress" -Funktion nicht funktioniert, da der keyup Event-Listener die Variable immer auf 0 zurücksetzen wird. Jede Hilfe wird geschätzt.

document.getElementById("where").addEventListener("keyup", showAddress, false); 

var x = 0; 

function showAddress (e) { 

    var search = document.getElementById("where").value; 
    if (search.length < 2) { 
     document.getElementById("addressNav").innerHTML = ''; 
     return 0; 
    } else { 
     var hr = new XMLHttpRequest(); 
     var url = "/handlers/suggestAddress.php"; 
     hr.open("POST", url, true); 
     hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     hr.onreadystatechange = function() { 
      if (hr.readyState == 4 && hr.status == 200) { 
       document.getElementById("addressNav").innerHTML = hr.responseText; 


       // click on the address 
       var divs = document.getElementById("addressNav").getElementsByTagName("div"), i; 
       for (i = 0; i < divs.length; i++) { 
        divs[i].onclick = function() { 
         document.getElementById("where").value = this.innerHTML; 
         document.getElementById("addressNav").innerHTML = ''; 
        }; 
       } 

       //navigate address from keyboard 
       if (e.keyCode == 38) { 
        if (x > 0) { 
         x -= 1; 
        } else { 
         x = divs.length - 1; 
        } 
       } else if (e.keyCode == 40) { 
        if (x < divs.length - 1) { 
         x += 1; 
        } else { 
         x = 0; 
        } 
       } else { 
        if (e.keyCode == 13) { 
         document.getElementById("where").value = divs[x].innerHTML; 
         document.getElementById("addressNav").innerHTML = ''; 
        } 
       } 

       divs[x].setAttribute("class", "addressListKeyboard"); 
       console.log(x); 
      } 
     }; 
     hr.send("search=" + search); 
    } 
} 

Answer 1

Variable x sollte die zuletzt gewählte div erinnern und deshalb ist es globale Reichweite hat. Das Verschieben in den lokalen Bereich funktioniert nicht, da showAddress der keyup-Ereignishandler ist, der den Wert von x jedes Mal löscht, wenn das keyup-Ereignis auftritt.