Jquery ui autocomplete enter key to add to list

Question

I have an input field similar to this http://jqueryui.com/demos/autocomplete/#multiple with add button. I want to add all comma separated values ​​added to the list as I type. I can't do this because keypress with enter seems to conflict with the autocomplete select event. The problem is that the user can add only one item. I want the user to add multiple items, then press enter to add them to the list at the same time.

A key entry event should occur only when the list of auto-complete offers is closed.

Answer 1

You can use the open and close autocomplete events to track whether the list of offers is open (by storing this information somewhere in the example below, in the "selectVisible" data ):

 $( "#tags" ) .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.ENTER && !$(this).data("selectVisible") ) { // Your code } ... }) .autocomplete({ open: function() { $(this).data("selectVisible", true); }, close: function() { $(this).data("selectVisible", false); }, ... }); 

Working example in jsFiddle .

Answer 2

I used the jQuery Multiselect widget with great success before, and I find it more intuitive for the user that they can select multiple options.

It also handles the Enter key accordingly.

http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/