How to customize Tapestry jquery autocomplete

Question

I am using jQuery AutoComplete mixin for Tapestry. I would like to change the behaviour of select function. I need to return the label property to the input filed and pass the value property to the sibling element. I have added the select function description to the javascript file but nothing has happened. I would like to know how to make my solution work.

(function ($) {

 T5.extendInitializers(function () {
    function init(specs) {

        var element = $("#" + specs.id),
            conf = {
                source: function (request, response) {
                 //...Defining Source Data
                },
                select: function (e,ui) {
                    e.preventDefault();
                    $("#" + specs.id).val(ui.item.label);
                    $("#" + specs.id).next().val(ui.item.value);
                },
                change: function(e,ui) {
                    alert("ss");
                }
            };

        if (specs.delay >= 0)
            conf.delay = specs.delay;

        if (specs.minLength >= 0)
            conf.minLength = specs.minLength;

        if (specs.options) {
            $.extend(conf, specs.options);
        }
        element.autocomplete(conf);
    }
    return {
        autocomplete: init
    }
  });
})(jQuery);

Answer 1

I had twerked autocomplete a bit in my tapestry app. The main thing with tapestry js twerking is to realize that under the hood there is still plain jQuery and its API.

This is a fix for submiting form after selecting value with mouse.

in js file:

function initSearchBox(options) {
    $(document).ready(function () {
        var searchBoxElem = $("#" + options.searchBoxId);
        searchBoxElem.on('autocompleteselect', function (event, ui) {
            // if "enter" pressed
            if(event.which == 13){
                $('#form').submit();
            } else {
                searchBoxElem.val(ui.item.label);
                $('#form').submit();
            }
            event.preventDefault();
        });
    });
}

in java file:

@AfterRender
public void afterRender() {
    // autocomplete selected fix
    JSONObject options = new JSONObject();
    options.put("searchBoxId", SEARCH_BOX_ID);
    javaScriptSupport.addScript("initSearchBox(%s)", options.toString());
}