1var li = $('#list > li');
2var liSelected;
3$(window).on('keydown', function(e){
4var selected;
5if(e.which === 40){
6 if(liSelected){
7 liSelected.removeClass('background');
8 next = liSelected.next();
9 if(next.length > 0){
10 liSelected = next.addClass('background');
11 selected = next.text();
12
13 }else{
14 liSelected = li.eq(0).addClass('background');
15 selected = li.eq(0).text();
16 }
17 }else{
18 liSelected = li.eq(0).addClass('background');
19 selected = li.eq(0).text();
20 }
21}else if(e.which === 38){
22 if(liSelected){
23 liSelected.removeClass('background');
24 next = liSelected.prev();
25 if(next.length > 0){
26 liSelected = next.addClass('background');
27 selected = next.text();
28
29 }else{
30
31 liSelected = li.last().addClass('background');
32 selected = li.last().text()
33 }
34 }else{
35
36 liSelected = li.last().addClass('background');
37 selected = li.last().text()
38 }
39}
40console.log(selected)
41});
42
43/*HTML FILE CODE
44
45<!DOCTYPE html>
46<html>
47<head>
48 <meta charset="utf-8">
49 <meta http-equiv="X-UA-Compatible" content="IE=edge">
50 <title></title>
51 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
52 <link rel="stylesheet" href="">
53 <style>
54 .background{
55 background: hsla(0, 100%, 0%, 0.4);
56 }
57 </style>
58</head>
59<body>
60 <input type="text" class="form-control" id="searchProduct" placeholder="Search..." />
61 <ul id="list">
62 <li id="match1" class="itemList">1</li>
63 <li id="match2" class="itemList">2</li>
64 <li id="match3" class="itemList">3</li>
65 </ul>
66</body>
67</html>
68
69
70
71
72
73*/