jQuery-UI Autocomplete submitting form onclick of item from dropdown list

Question

I'm using the jQueryUI autocomplete() function and I can't figure out how to have my form submit when an item is selected.

I think the issue is with the select: event but I'm new with jQueryUI and can't figure out how to make this work.

Here's my code which works fine otherwise:

            <script type="text/javascript">
            $(document).ready(function() {
                $(function() {
                    $( "#search_box" ).autocomplete({
                        source: function(request, response) {
                            $.ajax({ url: "<?php echo site_url('autocomplete/suggestions'); ?>",
                            data: { term: $("#search_box").val()},
                            dataType: "json",
                            type: "POST",
                        success: function(data){
                            response(data);
                        },
                        select: function (event, ui) {
                                $(event.target).val(ui.item);
                                $('#search_form').submit();
                                return false;
                            }
                        }); 
                    },          
                    minLength: 1 
                    });
                });
            }); 
            </script>

Any assistance would be greatly appreciated!

also you have never accepted an answer to your questions, so people might be less eager to help you. — Dave L.
– Dave L., Commented Jul 8, 2011 at 2:54
@tim: Your code works if copy-pasted (minus the AJAX): jsfiddle.net/uXHCQ with one tweak (ui.item.value instead of ui.item). What do you mean when you say your form doesn't submit? — Andrew Whitaker
– Andrew Whitaker, Commented Jul 8, 2011 at 2:58
hi Andrew, I mean that i want the form to submit once one of the items is selected, just the standard thing like Google does... — tim peterson
– tim peterson, Commented Jul 8, 2011 at 3:15

user229044 · Accepted Answer · 2012-07-12 17:33:21Z

4

Andrew was correct, see the fiddle he mentioned. If you switch the part with "ui.item" to "ui.item.value" the select: function() now works perfectly.

edited Jul 12, 2012 at 17:33

user229044♦

241k41 gold badges347 silver badges350 bronze badges

answered Oct 13, 2011 at 15:07

tim peterson

24.4k63 gold badges188 silver badges304 bronze badges

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

Comments

Zombie · Accepted Answer · 2012-11-08 04:29:45Z

0

Yes it works

Except if you expect to get the value in your server-side script in the page called by action...

For now, no way to find why auto-submit of the form after selection by mouse or by keyboard, and the $(event.target).val(ui.item.value) line, don't deliver the value in $_POST array

edited Nov 8, 2012 at 4:29

Zombie

1,9612 gold badges20 silver badges34 bronze badges

answered Oct 30, 2011 at 18:58

Desty Nova

1

Comments

Faizan · Accepted Answer · 2012-12-25 16:13:09Z

0

Yeah Alice is also right. You just need to add this line in your onclick function:

 $('#search_form').submit();

where search_form is the id of your form.

answered Dec 25, 2012 at 16:13

Faizan

1,8988 gold badges44 silver badges63 bronze badges

Collectives™ on Stack Overflow

jQuery-UI Autocomplete submitting form onclick of item from dropdown list

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related