4

私はウィケットを持っていAutoCompleteTextFieldます。モデルを更新するには、「onblur」イベントを使用します。また、検証が必要なため、「onblur」イベントが発生した後にテキスト フィールドを更新する必要があります。

問題を説明するためのコードサンプルを次に示します

WebPage サブクラス:

public class TestPage extends WebPage {

    private Integer testField;

    public TestPage() {

        final List<Integer> allowedValues = new ArrayList<Integer>();
        for (int i = 0; i < 5; i++) {
            allowedValues.add(50 + i * 5);
        }

        final PropertyModel<Integer> testModel = new PropertyModel<Integer>(this, "testField");

        final AutoCompleteSettings autoCompleteSettings = new AutoCompleteSettings();
        autoCompleteSettings.setShowListOnEmptyInput(true);
        autoCompleteSettings.setShowListOnFocusGain(true);

        final AutoCompleteTextField<Integer> testInput =
                new AutoCompleteTextField<Integer>("testInput", testModel, autoCompleteSettings) {
                    @Override
                    protected Iterator<Integer> getChoices(final String input) {
                        return allowedValues.iterator();
                    }
                };

        testInput.setOutputMarkupId(true);
        testInput.setMarkupId("testInput");
        add(testInput);

        testInput.add(new AjaxFormComponentUpdatingBehavior("onblur") {
            @Override
            protected void onUpdate(final AjaxRequestTarget target) {
                target.add(testInput);
            }
        });
    }
} 

対応する HTML:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" xml:lang="en"
      lang="en">
<body>

<input type="text" wicket:id="testInput"/>

</body>
</html>

問題は、マウス クリックで値を選択できないことです。

私は使用してみましたOnChangeAjaxBehavior-マウスクリックによる選択は機能しますが、すべての変更後に検証を実行したくありません(たとえば、ユーザーが54を入力したい場合、彼は5を入力します=>が起動されるため、検証が開始されますOnChangeAjaxBehavior)

AjaxFormComponentUpdatingBehavior("onblur")と の両方を組み合わせて使用​​してみまし OnChangeAjaxBehaviorたが、同じ問題がありました。「onchange」の前に「onblur」が起動されるため、マウスクリックで値を選択できません

target.add(testInput);行をコメントすると、期待どおりに動作することに注意してください。

このWicketの問題に似ているようです

この問題は 6.18.0 バージョンで修正されたと書かれていますが、私は正確に Wicket 6.18.0 を使用していますが、まだこの問題が発生しています。

Wicket 1.4 から wicket 6 へのアップグレードを行っています。Wicket 1.4 では問題なく動作しました。

この問題を解決する方法についてアドバイスをお願いします。あなたの助けは本当に感謝されます. 前もって感謝します。

4

1 に答える 1

0

ウィケット Jquery UI オートコンプリート ボックスを使用することをお勧めします。

HTML:

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
    <title>Wicket - jQuery UI: auto-complete</title>
    <style type="text/css">
        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 20px;
        }   
    </style>
</wicket:head>
</head>
<body>
<wicket:extend>
    <div id="wrapper-panel-frame" class="ui-corner-all">
        <form wicket:id="form">
            <div>Choose your favorite rock genre: (that starts with your criteria)</div>
            <br/>
            <input wicket:id="autocomplete" type="text" size="30" title="enter your criteria here"></input><br/>
            <br/>
            <div wicket:id="feedback" style="width: 360px;"></div>
        </form>
    </div>
</wicket:extend>
</body>
</html>

ジャワ

package com.googlecode.wicket.jquery.ui.samples.pages.autocomplete;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.Model;

import com.googlecode.wicket.jquery.ui.form.autocomplete.AutoCompleteTextField;
import com.googlecode.wicket.jquery.ui.panel.JQueryFeedbackPanel;

public class DefaultAutoCompletePage extends AbstractAutoCompletePage
{
    private static final long serialVersionUID = 1L;
    private static final List<String> CHOICES = Arrays.asList("Acid rock", "Alternative metal", "Alternative rock", "Anarcho punk", "Art punk", "Art rock", "Beat music", "Black metal", "Blues-rock", "Britpop", "Canterbury scene",
            "Chinese rock", "Christian metal", "Crossover Thrash Metal", "Crust punk", "Crustgrind", "Dark cabaret", "Death metal", "Deathcore", "Deathrock", "Desert rock", "Djent", "Doom metal", "Dream pop", "Drone metal",
            "Dunedin Sound", "Electronic rock", "Emo", "Experimental rock", "Folk metal", "Folk rock", "Freakbeat", "Funk metal", "Garage punk", "Garage rock", "Glam metal", "Glam rock", "Goregrind", "Gothic metal", "Gothic rock",
            "Grindcore", "Groove metal", "Grunge", "Hard rock", "Hardcore punk", "Heavy metal", "Indie pop", "Indie rock", "Industrial metal", "Industrial rock", "J-Rock", "Jazz-Rock", "Krautrock", "Math rock", "Mathcore",
            "Melodic Death Metal", "Melodic metalcore", "Metalcore", "Neo-psychedelia", "New Prog", "New Wave", "No Wave", "Noise pop", "Noise rock", "Noisegrind", "Nu metal", "Paisley Underground", "Pop punk", "Pop rock", "Pornogrind",
            "Post-Britpop", "Post-grunge", "Post-hardcore", "Post-metal", "Post-punk", "Post-punk revival", "Post-rock", "Power metal", "Power pop", "Progressive metal", "Progressive rock", "Psychedelic rock", "Psychobilly", "Punk rock",
            "Raga rock", "Rap metal", "Rap rock", "Rapcore", "Riot grrrl", "Rock and roll", "Rock en Español", "Rock in Opposition", "Sadcore", "Screamo", "Shoegazer", "Slowcore", "Sludge metal", "Soft rock", "Southern rock", "Space Rock",
            "Speed metal", "Stoner rock", "Sufi rock", "Surf rock", "Symphonic metal", "Technical Death Metal", "Thrash metal", "Thrashcore", "Twee Pop", "Unblack metal", "World Fusion");

    public DefaultAutoCompletePage()
    {
        // Form //
        final Form<Void> form = new Form<Void>("form");
        this.add(form);

        // FeedbackPanel //
        final FeedbackPanel feedback = new JQueryFeedbackPanel("feedback");
        form.add(feedback.setOutputMarkupId(true));

        // Auto-complete //
        form.add(new AutoCompleteTextField<String>("autocomplete", new Model<String>()) {

            private static final long serialVersionUID = 1L;

            @Override
            protected List<String> getChoices(String input)
            {
                List<String> choices = new ArrayList<String>();
                String inputLowerCase = input.toLowerCase();

                int count = 0;
                for (String choice : CHOICES)
                {
                    if (choice.toLowerCase().startsWith(inputLowerCase))
                    {
                        choices.add(choice);

                        // limits the number of results
                        if (++count == 20)
                        {
                            break;
                        }
                    }
                }

                return choices;

                //
                // Equivalent to:
                // return ListUtils.startsWith(input, CHOICES);
                //
            }

            @Override
            protected void onSelected(AjaxRequestTarget target)
            {
                info("Your favorite rock genre is: " + this.getModelObject());
                target.add(feedback);
            }
        });
    }
}

このコンポーネントは、必要なイベントに変更できます

それが合わない場合は、以下のリンクを確認してください。

http://www.7thweb.net/wicket-jquery-ui/autocomplete/DefaultAutoCompletePage;jsessionid=7916524E210E1245C95DCCB697DE6182?0

于 2015-09-07T14:28:24.793 に答える