Wicket6中AutoCompleteField的onchange/onselect事件不触发如何解决

问题根源 #

Wicket 6 的 AutoCompleteTextField 内部已绑定 onchange、onkeydown 等事件用于下拉候选列表的加载和交互，用户自行绑定的同名事件行为会被覆盖或冲突，导致自定义逻辑无法触发。

解决方案（覆盖两种触发场景） #

场景1：下拉候选列表选中事件处理 #

重写组件的 newAutoCompleteBehavior 方法，自定义自动完成行为的选中回调，该回调会在用户选中下拉项时直接触发：

AutoCompleteTextField<AssetInfo> assetID = new AutoCompleteTextField<AssetInfo>("assetId", Model.of(new AssetInfo()), AssetInfo.class, renderer, assetInfoSettings) {
    private static final long serialVersionUID = 1L;

    @Override
    protected Iterator<AssetInfo> getChoices(String input) {
        return assetInfoService.fetchAssetIDsForComplete(input).iterator();
    }

    // 重写自动完成行为生成逻辑，自定义选中回调
    @Override
    protected AutoCompleteBehavior<AssetInfo> newAutoCompleteBehavior(
        IAutoCompleteRenderer<AssetInfo> renderer, AutoCompleteSettings settings) {
        return new AutoCompleteBehavior<AssetInfo>(renderer, settings) {
            private static final long serialVersionUID = 1L;

            @Override
            protected void onSelect(AjaxRequestTarget target, AssetInfo selected) {
                // 先更新组件模型
                assetID.setModelObject(selected);
                // 触发自定义逻辑
                onAssetIdSelect(target);
            }
        };
    }
};

场景2：手动输入完成失焦事件处理 #

绑定 blur 事件的 AjaxFormComponentUpdatingBehavior 处理手动输入场景，该事件不会和组件内部逻辑冲突，失焦时会自动更新组件模型后触发自定义逻辑：

assetID.add(new AjaxFormComponentUpdatingBehavior("blur") {
    private static final long serialVersionUID = 1L;

    @Override
    protected void onUpdate(AjaxRequestTarget target) {
        AssetInfo inputValue = assetID.getModelObject();
        // 可补充输入合法性校验逻辑，比如校验ID是否存在
        if (inputValue != null && inputValue.getAssetId() != null && !inputValue.getAssetId().trim().isEmpty()) {
            onAssetIdSelect(target);
        }
    }

    @Override
    protected void onError(AjaxRequestTarget target, RuntimeException e) {
        // 输入格式错误处理逻辑
    }
});

优化说明 #

• 无需再给组件绑定 onchange、onselect 事件的行为，避免冲突
• 可给失焦行为增加节流配置，避免高频触发：setThrottleDelay(Duration.milliseconds(300))
• 如果需要和组件原有ajax逻辑联动，可重写 updateAjaxAttributes 方法追加自定义JS回调，在原有请求完成后执行你的逻辑

内容的提问来源于stack exchange，提问作者Entropy