Available in the OSS Version
Combo Box - Keyboard Navigation
This sample demonstrates keyboard navigation in the igCombo control.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Keyboard navigation support makes the combo easier and faster to use, and more accessible. This sample shows some basic keyboard navigation scenarios. For a full list of keyboard navigation support, see Keyboard Navigation in our docs.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style>
.combo-label {
margin-bottom: .5em;
}
.tooltipStyle {
max-width: 400px;
}
.glowing-border {
outline: none !important;
border-color: #8dff71 !important;
box-shadow: 0 0 10px #8dff71 !important;
background-color: #CBFF99;
}
.normal {
border: 1px solid #bcbcbc;
background-color: #ffffff;
box-shadow: 0 0 5px #bcbcbc !important;
}
</style>
<h4 class="combo-label">World's 10 Highest Mountain Peaks</h4>
<div id="combo"></div>
<a id="tooltip" title="Message"></a>
<script src="/data-files/top-10-mountain-tops.js"></script>
<script type="text/javascript">
$(function () {
var tipIndex = 0;
$("#combo").igCombo({
width: "270px",
textKey: "MountainName",
valueKey: "ID",
dataSource: mountainTops,
multiSelection: {
enabled: true
},
dropDownOpened: function (evt, ui) {
if ((evt.keyCode == 40) && (tipIndex == 1)) {
showWellDoneMessage();
}
},
dropDownClosed: function (evt, ui) {
if ((evt.keyCode == 38) && (tipIndex == 4)) {
showWellDoneMessage();
}
//Close the drop down when there are selected items
if (evt.keyCode == 27 && tipIndex == 7 && $("#combo").igCombo("selectedItems")) {
showWellDoneMessage();
}
},
selectionChanged: function (evt, ui) {
if (evt.keyCode == 16 && (tipIndex == 6)) {
showWellDoneMessage();
}
}
});
$("#tooltip").tooltip({
position: { of: ".ui-igcombo-buttonicon", my: "left+55 center", at: "right center" },
open: function (event, ui) {
$("#tooltip").tooltip("option", "content", getTip(tipIndex++));
},
tooltipClass: "tooltipStyle"
});
setTimeout(function () {
startExample();
}, 1500);
$(document).keydown(function (e) {
if (e.keyCode == 36 && e.ctrlKey && tipIndex == 3) {
var ddOpened = $("#combo").igCombo("dropDownOpened");
if (ddOpened) {
showWellDoneMessage();
} else {
showMessage("Open the Drop Down first!");
}
}
if (e.keyCode == 35 && e.ctrlKey && tipIndex == 2) {
var ddOpened = $("#combo").igCombo("dropDownOpened");
if (ddOpened) {
showWellDoneMessage();
} else {
showMessage("Open the Drop Down first!");
}
}
//Clear the input when Esc is pressed
if (e.keyCode == 27 && tipIndex == 5) {
showWellDoneMessage();
}
});
function startExample() {
$("#combo").igCombo("clearInput");
$("#combo").igCombo("closeDropDown");
$('#tooltip').tooltip('open');
$(".ui-igcombo-field").focus();
}
function showMessage(message) {
var currentContent = $("#tooltip").tooltip("option", "content");
$("#tooltip").tooltip("option", "content", currentContent + "<br /><b>" + message + "</b>");
setTimeout(function () {
$("#tooltip").tooltip("option", "content", currentContent);
}, 2000);
}
function showWellDoneMessage() {
var content = $("#tooltip").tooltip("option", "content");
$("div[role='tooltip']").switchClass("normal", "glowing-border", 1000);
$("#tooltip").tooltip("option", "content", content + " <span style='display: inline-block' class='ui-icon ui-icon-check'></span>");
setTimeout(function () {
$("#tooltip").tooltip("close");
setTimeout(function () {
if (tipIndex == 7) $("#tooltip").tooltip("close");
else {
$("#tooltip").tooltip("open");
$("#tooltip").tooltip("option", "position", { of: ".ui-igcombo-buttonicon", my: "left+55 center", at: "right center" });
}
}, 500);
}, 1500);
}
function getTip(idx) {
var tips = [
"Press <b>Down arrow</b> to Open drop down if closed or Move to next item if opened",
"Press <b>Ctrl</b> + <b>End</b> to Move to very last item when Drop down is opened",
"Press <b>Ctrl</b> + <b>Home</b> to Move to very first item in drop down when Drop down is opened",
"Press <b>Up arrow</b> to Close drop down if opened or Move to previous item",
"Type some value, for example 'text' and Press <b>Esc key</b> to clear the content when there isn't selected item",
"While holding <b>Shift</b> + <b>Up/Down arrows</b> the active (highlighted) items will be changed, if you want to select them, just release <b>Shift key</b>",
"Press <b>Esc key</b> in order to close the drop down when item/items are selected",
];
return tips[idx];
}
});
</script>
</body>
</html>
var mountainTops = [
{ "ID": 1, "MountainName": "Everest", "Country": "Nepal/Tibet", "Feet2": 29.035 },
{ "ID": 2, "MountainName": "K2 (Mount Godwin Austen)", "Country": "Pakistan/China", "Feet2": 29.250 },
{ "ID": 3, "MountainName": "Kangchenjunga", "Country": "India/Nepal", "Feet2": 28.169 },
{ "ID": 4, "MountainName": "Lhotse", "Country": "Nepal/Tibet", "Feet2": 27.940 },
{ "ID": 5, "MountainName": "Makalu", "Country": "Nepal/Tibet", "Feet2": 27.766 },
{ "ID": 6, "MountainName": "Cho Oyu", "Country": "Nepal/Tibet", "Feet2": 26.906 },
{ "ID": 7, "MountainName": "Dhaulagiri", "Country": "Nepal", "Feet2": 26.795 },
{ "ID": 8, "MountainName": "Manaslu", "Country": "Nepal", "Feet2": 26.781 },
{ "ID": 9, "MountainName": "Nanga Parbat", "Country": "Pakistan", "Feet2": 26.660 },
{ "ID": 10, "MountainName": "Annapurna", "Country": "Nepal", "Feet2": 26.545 }
];