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

The Angular scope fails to reflect changes on the view

Understanding Vue.js - encountering the error message "property or method is not defined"

Obtaining the source code in CKEditor while in edit mode with Rails

Having trouble loading select2 using PHP/Ajax/JSON even though I can see the data in the inspector

What is the reason behind the effectiveness of this prime number verifier?

Unable to retrieve HTML content through a Node.js server

Generate random images and text using a script that pulls content from an array

"Pushing elements into an array does not function properly within a promise

Jquery onchange event fails to fire

What is the method for inputting multi-line strings in the REST Client extension for Visual Studio Code?

A guide on assigning specific (x, y) coordinates to individual IDs within the tree structure

Sending data between two elements when a jQuery event is triggered

How to implement an instance method within a Typescript class for a Node.js application

Delete JavaScript functions and events from memory once the JavaScript code has been removed from the HTML file

Organizing AngularJS Data by Initial Letter with the <select></select> HTML Element

The array element is not being shown in the id "main" when using a for loop with the onchange function

Guide to establishing a connection to the Companies House API: Essential guidelines on setting up cURL headers and requisite API key specifications

Exploring the world of JMeter: capturing sessions with JavaScript and jQuery

React: Updating State with the Spread Operator and Array Method to Add Elements to an Array

Is there a way for me to dynamically decide whether to use the append or prepend function?