Question

I’m writing my own autocomplete plugin with jquery. The list items are drawn dynamically based on a json response. I have up/down arrow key code that works well on keyup event fired on the input field.

I want to add an enter key event to every list item. So, when the user is navigating through the autocomplete dropdown using the up/down arrow keys, an enter key press event would add the value of that list item to the input field.

Can someone please help? I’ve tried binding event to the list item

if (e.keyCode == 40){ 
    // highlight the list item
    $("li").bind("keyup",function(e){
        if (e.keyCode == 13){
            // add value of list item to input field
        }
    });
}

Answer 1

Something like this:

$("input").live("keypress", function(keyarg){
 if(keyarg.keyCode == 13) { //Enter keycode
   $("WHATEVERELEMENT").append($(this).val());
 }
});

To expand on your comment here is a jfiddle http://jsfiddle.net/csLVX/5/: {tidying up my code a bit!}

    <ul>
        <li>ITEM 1</li>
        <li>ITEM 2</li>
        <li>ITEM 3</li>
    </ul>
    <br /><input/>



   liPossition = 0;

$("input").live("keyup",function(e){ 
     if (e.keyCode == 40) { // down arrow key code 
        if (liPossition != $("li").length-1) {
          liPossition++;
        }
        $("input").val($("li:eq("+liPossition+")").text());


    } if (e.keyCode == 38) { // up arrow key code        
       if (liPossition == -1) {
            //if we reach min items do nothing
           liPossition = 0;
        } else {
            liPossition--;
        }
        $("input").val($("li:eq("+liPossition+")").text());

    } if (e.keyCode == 13) { // enter key code 
    //some code to proceed the form
    } 
});