stickit doesn't save values from autocomplete fields

Question

I have plugged autocomplete after in initialize function as advised from stickit documentation.

Almost hello world world example:

MyApp.Views.Form = Backbone.View.extend({
    el: "#my-form",
    bindings: {
        "#postcode_with_suburbs": {
            observe: "postcode",
            initialize: function($el, model, options) {
                $el.autocomplete({
                    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] 
                })
            },
            onSet: function(val, options) {
                return $("#postcode_with_suburbs").val(); 
            }
        },
    },
    events: {
        "click #form-submit" : "submit",
    },
    initialize : function() {
            this.listenTo(this.model, "change");
            this.render();
    },
    render: function() {
        this.$el.html(JST['backbone/templates/car_insurance/form']);
            this.stickit();
        return this;
    }
});

So the problem is whenever a user fills the form and autocomletes the postcode by clicking the autocomplete value it is not saved to the model attribute. Saved as ja instead of java

However scrolling down with a keyboard over the options from an autocomplete, the values is set properly to the attribute of a model. Saved as java

Answer 1

The stickit bindings does bind an event listener for change input keyup events on bound DOM element of type <input>. Uses the listener to update the model attribute. The element postcode_with_suburbs, in your case, being an input type should fire change event when user selects one of the option from drop down. I don't know why it is not firing the event. Try this fiddle here See the changes

select: function(event, ui) {
    $(this).trigger("change", event);
}

In select event callback of autocomplete, I'm triggering change event explicitly on the element. You can also configure events: [autocompleteselect] instead of select callback.