Using arrow keys to navigate between elements

Hi

I have implemented a script for autosuggestion through AJAX and php on na input type text box.
The elements that appears are below the input box and appears in a <div> and each line is made as <ul> <li>line1</li> <li>line 2 etc</li> </ul>

I wish to navigate with arrow up and arrow down between each line. How can this be done?
LVL 1
mjarnerAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
numberkruncherConnect With a Mentor Commented:
What about something like the following?
<html>
<head>
    <title>Test Page</title>
    <style type="text/css">
        #item_selector li {
            background-color: transparent;
            color: black;
            font-weight: normal;
        }
        #item_selector li.selected {
            background-color: red;
            color: black;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript">
        var selectedIndex = 0, itemCount = 0;
        function keyPressed(evt) {
            switch (evt.charCode || evt.keyCode) {
                case 38: // UP
                    if (--selectedIndex < 0)
                        selectedIndex = 0;
                    updateSelection();
                    break;
                case 40: // DOWN
                    if (++selectedIndex >= itemCount)
                        selectedIndex = itemCount - 1;
                    updateSelection();
                    break;
            }
            return true;
        }
        function updateSelection() {
            itemCount = 0;

            var list = document.getElementById('item_selector');
            var item = list.firstChild;
            while (item) {
                if (item.nodeName == 'LI') {
                    item.className = (itemCount == selectedIndex ? 'selected' : '');
                    ++itemCount;
                }
                item = item.nextSibling;
            }
        }
    </script>
</head>
<body onload="updateSelection()" onkeydown="return keyPressed(event);">
    <ul id="item_selector">
        <li class="selected">line1</li>
        <li>line2</li>
        <li>line3</li>
    </ul>
</body>
</html>

Open in new window

0
 
Graceful_PenguinCommented:
What you have to do is have a variable that tracks on what line the cursor is on then you have to trap the keystroks and that increament of decrement the cursor traker and update the interface accordingly.
0
 
leakim971PluritechnicianCommented:
0
All Courses

From novice to tech pro — start learning today.