jQuery自动完成更改事件

Question

I got a jquery autocomplete combobox on my page like this:

$.widget( "ui.combobox", {
        _create: function() {
        ...
        var input = this.input = $( "<input>" )
                .insertAfter( select )
                .val( value )
                .autocomplete({
                    ...
                    select: function( event, ui ) {
                    ...
                    change: function( event, ui ) {
                    ...

$(function() {
    $("#myid").combobox();
}

on select and change events I perform ajax calls and change some info in the hidden fields, but the problem appear when I just type something and without unfocusing the text field click Submit button - change event have not being triggered and I get a wrong data on server (basically I get a data in hidden fields which was previously set by select-change fired events, but have no catch the latest). So how can I perform text field unfocus to trigger change event before sending a form? Or maybe there are some other ways to catch and trigger latest changes in text field(mb replace change by some onkeypress event)? Thanks for any help.

Answer 1

You could disable the default action on the submit button

$(".submit-btn").click(function(e){e.preventDefault();});

This way the submit button wont submit the form and your form will get the select or change event coz the user will have unfocussed by clicking the submit button

Answer 2

What you can do is make a separate out the function for fetching hidden field data on change event. Also, have a callback function as a parameter to that function which will get called after data has been updated. Then you can use the same function in change event handler and in submit handler for form. In submit handler, you will disable default submit action and also provide callback to that function so that when data is updated in hidden fields you can submit the form through JS.

Above solution should work, but if you are fetching data to fill out from your own servers then you should not do that through Javascript on client but that should happen on your server side code only. For example if you are using hidden fields to map user entered string eg "poland" to some id in your database and storing that ID in hidden field then you should simply send "poland" as string to server and handle this mapping on server. That way your form need not wait to get this mapping from server. Of course this can only be done if you are sending AJAX request to your server and not to some other server which you can not access from your server.