Question

I am trying to get an autocomplete working and making an Ajax form submission on change, and so far the first is working but not the second. I am using jQuery UI Autocomplete with Combobox, http://jqueryui.com/demos/autocomplete/#combobox. From my Django template, I define a handler, presently beginning with an alert that seems never to have been triggered:

function update_autocomplete(event, ui)
    {
    alert("Reached update_autocomplete");
    var split_value = ui.item.value.split(".");
    var field = split_value[0];
    var id = split_value[1];
    $.ajax({
        data:
            {
            id: "Entity_" + field + "_" + {{ entity.id }},
            value: id,
            },
        url: "/ajax/save",
        });
    }

And later on:

$(function()
    {
    $("#department").combobox();
    $("#reports_to").combobox();
    $("#department").bind("autocompletechange",
        update_autocomplete);
    $("#department").bind("autocompleteselect",
        update_autocomplete);
    $("#reports_to").bind("autocompletechange",
        update_autocomplete);
    $("#reports_to").bind("autocompleteselect",
        update_autocomplete);
    });

In the webpage rendered, the UI seems show the desired behavior apart from triggering the save-related event. Neither Chrome nor Firefox report errors. And the alert provisionally put in seems not to have triggered even once.

Am I approaching this problem in the right way? If I have the wrong approach, what is the correct approach to make a jQuery UI autocomplete that will save on an entry being chosen?

Thanks,

–edit–

I’ve replaced the second snippet with:

$(function()
    {
    $(".autocomplete").combobox();
    $(".autocomplete").autocomplete({select: update_autocomplete});
    $(".autocomplete").bind({"autocompleteselect": update_autocomplete});
    $(".autocomplete").bind({"autocompletechange": update_autocomplete});
    });

The behavior seems to be unchanged.

Answer 1

This works for me:

I set the event handler in the original autocomplete method call. I’m assuming that #department is the autocompleted input.

$("#department").autocomplete({
    source: my_source,
    select: function(event, ui) {
        update_autocomplete(event, ui);
    }
});

Hope this helps.