Question

I have this jS Fiddle..

http://jsfiddle.net/E7MSN/101/

If you click inside the textbox and press return then you get a set of options and you can use the up and down arrows to navigate throught the items.

If you click the ADD link then try to navigate you can only navigate through the static – pre-defined ones. Can you assist me in finding a way around this?

Thanks

Full Code Below

HTML

<input type="text" id="autofill"/>
    <a href='#' class='add'>ADD</a>
 <div class="services">
<div class="items">
    <ul>                           
        <li class="mail-icon selected"><a href="#" id="mail">mail</a></li>
        <li class="forum-icon"><a href="#" id="forum">lang</a></li>
        <li class="chat-icon"><a href="#" id="chat">chat</a></li>
    </ul>
</div>
</div>

JS

 $(document).ready(function () {

 $(".add").click(function(){
      $(".items").append("<li>Item</li>");
 });

 });


 $("#autofill").keydown(function(e) {
     if (e.keyCode == 13) { // enter
         if ($(".services").is(":visible")) {
             selectOption();
         } else {
             $(".services").show();
         }
         menuOpen = !menuOpen;
     }
     if (e.keyCode == 38) { // up
         var selected = $(".selected");
         $(".services li").removeClass("selected");
         if (selected.prev().length == 0) {
             selected.parent().children().last().addClass("selected");
         } else {
             selected.prev().addClass("selected");
         }
     }
     if (e.keyCode == 40) { // down
         var selected = $(".selected");
         $(".services li").removeClass("selected");
         if (selected.next().length == 0) {
             selected.parent().children().first().addClass("selected");
         } else {
             selected.next().addClass("selected");
         }
     }
 });

 $(".services li").mouseover(function() {
     $(".services li").removeClass("selected");
     $(this).addClass("selected");
 }).click(function() {
     selectOption();
}); 

function selectOption() {
    $("#autofill").val($(".selected a").text());
    $(".services").hide();
}

Answer 1

Replace:

$(".services li").mouseover(function ... )

With

$('.services').on('mouseover', 'li', function... )