如何自定义Tapestry jquery自动完成功能

时间:2013-08-06 15:40:11

标签: jquery autocomplete tapestry

我正在为Tapestry使用jQuery AutoComplete mixin。我想改变select函数的行为。我需要将label属性返回到输入字段并将value属性传递给sibling元素。我已经将选择功能描述添加到javascript文件但没有发生任何事情。我想知道如何使我的解决方案有效。

(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);

1 个答案:

答案 0 :(得分:0)

我的tapestry应用程序中有一点自动完成功能。 tapestry js twerking的主要内容是要意识到底层仍然存在简单的jQuery及其API。

这是用鼠标选择值后提交表单的修复方法。

在js文件中:

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();
        });
    });
}

在java文件中:

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