Ich mache eine Auswahl-Steuerelement, das eine Liste von Optionen in einem 'li' zeigt und ermöglicht es dem Benutzer, nach oben und unten durch die li's blättern. Da die li's manchmal gefiltert werden können, werden sie durch ein '.hide' unsichtbar gemacht werden, was mir das folgende Markup:
<input type="text" id="comboBox" />
<ul id="comboBoxData">
<li style="display:none">1</li>
<li>12</li>
<li>123</li>
<li>1234</li>
<li style="display:none">12345</li>
<li style="display:none">123456</li>
<li>1234567</li>
<li>12345678</li>
</ul>Ich habe den folgenden JQuery-Code, um die Pfeiltasten-Steuerelemente zu behandeln:
$('#comboBox').bind('keypress', function(e) {
if (e.keyCode >= 38 && e.keyCode <= 41) {
if ($("#comboBoxData li.selected").length > 0) {
var current = $("#comboBoxData li.selected");
if (e.keyCode == 38) {
$("#comboBoxData li.selected").prev('li:visible').addClass('selected');
} else if (e.keyCode == 40) {
$("#comboBoxData li.selected").next('li:visible').addClass('selected');
}
current.removeClass('selected');
} else {
$("#comboBoxData li:visible:first").addClass('selected');
}
$("#comboBox").val($("#comboBoxData li.selected").html());
}
});mit dem folgenden CSS, um deutlich zu markieren, welches Element ich ausgewählt habe:
.selected
{
background-color:Navy;
color:White;
}Mein Problem ist dies, in dem Beispiel, das ich gebe, wenn der Benutzer drückt die 'down'-Taste die LI für '12' wird ausgewählt und die Auf- und Ab-Tasten funktionieren richtig für '12' bis zu '1234' jedoch dort Sie stoppen und können nicht finden, die '1234567' wegen der Lücke der zwei Li's, die auf 'display:none' eingestellt sind. gibt es eine Möglichkeit, dies zu umgehen? vielleicht eine Alternative zu .next() und .previous()?
