How to bind keypress event in jquery autocomplete?

Question

As you can see in http://jsfiddle.net/hn838/4/ 'click' is working fine for autofiller, But I want to trigger same code on enter key keypress also, but it is not working for me. My code is here for both. Click :

$('.ui-autocomplete').on('click', '.ui-menu-item', function(){
    $('.college').trigger('click');
});

Keyprss :

 $('.ui-autocomplete').on('keypress', '.ui-menu-item', function(e){
            if (e.which == 13) {
                         e.preventDefault();
            $('.college').trigger('click');
           }
        });

I want $('.college').trigger('click'); execution on click and enter keypress. click is working fine but keypress in not working.any clue ?

Since there's some confusion: Can you, please, tell us wether you really want to handle the actual keypress or the selection of an element from the list, which makes more sense. — a better oliver
– a better oliver, Commented Apr 27, 2013 at 10:36

louisbros · Accepted Answer · 2013-04-27 10:29:21Z

6

Rather than binding to key events, you could add a function to the select event:

select: function(){
    $('.college').trigger('click');
}

That way it'd only trigger when the user actually selected the autocomplete value.

http://jsfiddle.net/louisbros/hn838/10/

edited Apr 27, 2013 at 10:29

answered Apr 27, 2013 at 10:22

louisbros

8755 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A. Wolff Over a year ago

Should be the accepted answer. Using select: function(e,item){...} lets OP do exactly what he wants.

Eli · Accepted Answer · 2013-04-27 10:22:39Z

2

There is no class ui-autocomplete inside your fiddle. So I assume it looks like this:

<input type = 'text' class = 'search ui-autocomplete' />

and also there is no class ui-menu-item in your fiddle, so you should do like this:

$('.ui-autocomplete').on('keypress', function(e){
    if (e.which == 13) {
        e.preventDefault();
        $('.college').trigger('click');
    }
});

Updated Fiddle

If you want to use the class that automatically generated from jQuery UI, you can do:

$('.ui-autocomplete-input').on('keypress', function(e){
    if (e.which == 13) {
        e.preventDefault();
        $('.college').trigger('click');
    }
});

Fiddle

edited Apr 27, 2013 at 10:22

answered Apr 27, 2013 at 10:13

Eli

14.9k5 gold badges61 silver badges77 bronze badges

6 Comments

Eli Over a year ago

@pandit Can you check again? it's ui-autocomplete-input not ui-autocomplete

Anshul Over a year ago

you removed '.ui-menu-item' how can i track in this code that which <li> ui-menu-item is pressed ?

Eli Over a year ago

@pandit Sorry but where is your .ui-menu-item element? You target it in on function but I cannot find where's this element in your fiddle.

Anshul Over a year ago

your second fiddle is exactly match with my requirements. thanks for your effort and time..

Anshul Over a year ago

anyway when you enter something in input field than a ul is created with suggestions in li's which have class .ui-menu-item, I am refering that...

|

Collectives™ on Stack Overflow

How to bind keypress event in jquery autocomplete?

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related