Enter key not triggering submission in jQuery UI autocomplete field

Question

Enter key not triggering submission in jQuery UI autocomplete field

I'm currently working on implementing the autocomplete feature following a tutorial, and while it's functioning, I'm facing an issue with submitting the form when the user selects an item and hits enter. Below is the Coffeescript code that I'm using, but for some reason, it doesn't work as expected. Can someone point out where I might be going wrong?

jQuery ->
  $('#search_bar').autocomplete( 
    source: $('#search_bar').data('autocomplete-source')
  ).keydown (e) ->
    $('#search_button').trigger "submit" if e.keyCode is 13

My goal is to also have the form submit upon selecting an item with a mouse click – not sure if this is achievable though?

Update: Attempted the following...

jQuery ->
  $('#search_bar').autocomplete
    source: $('#search_bar').data('autocomplete-source'),
    select: (event, ui) ->
      $(this).parents("form").submit()

While this method now works if you use the keyboard to select an item and press enter, selecting an item with a mouse click only sends the typed string, not the complete word from the auto-complete drop-down. Perhaps the search field needs to be updated with the text content on mouse-over?

Update 2: Problem solved! Just include the following at the end

focus: (event, ui) ->
   $('#search_bar').val(ui.item.value)

javascript ruby-on-rails jquery-ui autocomplete coffeescript

Answer 1

Answer №1

To handle the selection event, refer to the documentation available here. The autocomplete feature captures the enter key press to close the menu without propagation. The select event is triggered by both the enter key and mouse click. However, clicking may submit the form before updating the label value, so ensure to set the value first. Depending on your data source, consider using item.label instead of item.value.

$('#search_bar').autocomplete({
   source: $('#search_bar').data('autocomplete-source'),
   select: function(event, ui) {
         $(this).val(ui.item.value);
         $(this).parents("form").submit();  // This submits the form.
   }
})

A possible CoffeeScript conversion could be:

$('#search_bar').autocomplete(
   source: $('#search_bar').data('autocomplete-source'),
   select: (event, ui) ->
         $(this).val(ui.item.value).parents("form").submit();
)

Answer 2

To handle the selection event, refer to the documentation available here. The autocomplete feature captures the enter key press to close the menu without propagation. The select event is triggered by both the enter key and mouse click. However, clicking may submit the form before updating the label value, so ensure to set the value first. Depending on your data source, consider using item.label instead of item.value.

$('#search_bar').autocomplete({
   source: $('#search_bar').data('autocomplete-source'),
   select: function(event, ui) {
         $(this).val(ui.item.value);
         $(this).parents("form").submit();  // This submits the form.
   }
})

A possible CoffeeScript conversion could be:

$('#search_bar').autocomplete(
   source: $('#search_bar').data('autocomplete-source'),
   select: (event, ui) ->
         $(this).val(ui.item.value).parents("form").submit();
)

Answer 3

Answer №2

If you're not familiar with coffee script, here's how you can achieve the same thing using javascript

http://jqueryui.com/demos/autocomplete/

To trigger a submit action when the user selects something, use the 'select' event:

$( ".selector" ).autocomplete({
    select: function(event, ui) {
        $('#theForm').submit();
    }
});

This should handle both cases - when something is selected either by pressing "Enter" or clicking on it.

Answer 4

If you're not familiar with coffee script, here's how you can achieve the same thing using javascript

http://jqueryui.com/demos/autocomplete/

To trigger a submit action when the user selects something, use the 'select' event:

$( ".selector" ).autocomplete({
    select: function(event, ui) {
        $('#theForm').submit();
    }
});

This should handle both cases - when something is selected either by pressing "Enter" or clicking on it.

Enter key not triggering submission in jQuery UI autocomplete field

Answer №1

Answer №2

Similar questions

Reacting with Angulatory: Response heads are not being transferred in applications

"Keeping your HTML content up-to-date with AngularJS dynamic updates

Top button disappears in Chromium browser after fade-in effect

Angular component equipped with knowledge of event emitter output

Suggestions for rendering this JSON format

Preventing file visibility in Three.js resource directory

Parsing form bodies in Express.js allows for easy extraction of data

Interactive KML layer in ArcGIS mapping tool

Is there a way to retrieve the text of a clicked button with execute_script?

Guide to saving an Object to a file (JSON) within the project directory using React Native for Debuggingpurposes

Using CSS and JavaScript to hide a div element

Sending a variable using the onchange function in jQuery

Angular movie database using an API from an apiary

Delay reading body until npm request completes

Encountering vulnerabilities during NPM installation, attempting to fix with 'npm audit fix' but unsuccessful

Optimizing communication of time data in Laravel and Vue.js using Inertia

Executing JavaScript code within ASP.NET Visual Basic

Add a pair of assorted div elements to a shared container

Quick Validator. Establishing a schema that relies on specific values

React Router Link Component Causing Page Malfunction