CODEWITHSUNDEEP
javascriptjqueryjquery-autocomplete
Nick Heiner
Nick Heiner

Reputation: 122412

jQuery Autocomplete: Hitting return submits the form

I am using the jQuery Autocomplete plugin.

// I'm not sure if there's a better way to do this

var base_url = window.location.href.slice(0, window.location.href.indexOf('/bar'));
$('.foo-widget').find('input:first-child').autocomplete(base_url + "/api/baz?format=newline");

The markup:

<ul class="foo-widget">
    <li>
        <input value="" autocomplete="off" class="ac_input"><input value="" autocomplete="off" class="ac_input"><button>Add</button>
   </li>
</ul>

This works fine. However, when I hit "enter" to choose an item from the autocomplete results, the form submits. Why might this be happening?

I looked into jquery.autocomplete.js and saw that the following is being executed:

        case KEY.RETURN:
            if( selectCurrent() ) {
                // stop default to prevent a form submit, Opera needs special handling
                event.preventDefault();
                blockSubmit = true;
                return false;
            }
            break;

Shouldn't event.preventDefault() and blockSubmit = true stop the form from submitting? Is it possible that JS code I have elsewhere on the page is interfering?

Upvotes: 4

Views: 1984

Answers (2)

JeffSea
JeffSea

Reputation: 385

I would recommend adding an keypress event on the Autocomplete element and return false from that. It will not impact your ability to submit the rest of the form at a later time.

Upvotes: 1

Rui Jiang
Rui Jiang

Reputation: 1672

You will want to disable submission on enter by hooking up an event handler for form.submit: $("form").submit(function() { return false; });

Upvotes: 0

Related Questions