jQuery UI Autocompleteの選択後にフォームフィールドをクリアする


97

私はフォームを開発していて、jQuery UI Autocompleteを使用しています。ユーザーがオプションを選択すると、その選択が親<p>タグに追加されたスパンにポップされるようにします。次に、フィールドに選択が入力されるのではなくクリアされるようにします。

スパンは問題なく表示されていますが、フィールドをクリアできません。

jQuery UI Autocompleteのデフォルトの選択アクションをどのようにキャンセルしますか?

これが私のコードです:

var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
    source: availableTags,

    select: function(){
        var newTag = $(this).val();
        $(this).val("");
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

単に行うだけで$(this).val("");は機能しません。厄介なのは、オートコンプリートを無視してもほぼ正確な機能が正常に動作し、ユーザーが次のようにコンマを入力したときにアクションを実行することです。

$('[id^=item-tag-]').keyup(function(e) {
    if(e.keyCode == 188) {
        var newTag = $(this).val().slice(0,-1);
        $(this).val('');
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

実際の最終結果は、オートコンプリートで複数の選択を処理できるようにすることです。誰か提案があれば歓迎します。

回答:


182

関数$(this).val(''); return false; の最後に追加してselectフィールドをクリアし、イベントをキャンセルします:)

これにより、値が更新されなくなります。ここで109行目でどのように機能するかを確認できます

そこのコードは特にfalseをチェックします:

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}

素晴らしい!でもばかげた気がします。今、私は知っています、そして知ることは戦いの半分です。
ジョンFハンコック

それは修正しました。受け入れようとしたが、それ以上7分間は受け入れられなかった。承諾しました。ありがとう。
ジョンFハンコック

1
私はちょうど値を自分で設定するには、あなたがfalseを返したら、あなたは、もはや必要性(のためのすなわち不要ということを追加してみましょう$(this).val('');
ウリ

9
入力フィールドの値をまったくクリアしたい場合でも、への呼び出し.val('')が発生する必要があると思います。return false;唯一の入力欄に表示され、選択した項目のテキストを防ぐことができます。
ライアン、

1
Uriは正しくなく、Ryanは正しい。選択内容で更新されないようにするには、falseを返す必要があります。また、クリアするには、$(this).val( '')がさらに必要です。
mynameistechno 2011

19

falseを返す代わりに、event.preventDefault()を使用することもできます。

select: function(event, ui){
    var newTag = $(this).val();
    $(this).val("");
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    event.preventDefault();
}

この方法は受け入れられた答えよりも効率的だと思います。
dlsso 2017年

6

フィールドを空にするには、selectコールバック内でfalseを返す必要があります。ただし、フィールドを再度制御する場合、つまり値を設定する場合は、UIから抜け出すために新しい関数を呼び出す必要があります。

おそらくあなたは次のようなプロンプト値を持っています:

var promptText = "Enter a grocery item here."

要素の値として設定します。(フォーカスを ''に設定します)。

$("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
    source: availableTags,
    select: function(){
        $(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
     foo.resetter(); // break out //
    return false;  //gives an empty input field // 
    }
});

foo.resetter = function() {
  $("selector").val(promptText);  //returns to original val
}

こんにちは。プロンプトの保存について別の質問がありました。技術的な理由でプレースホルダーを使用できません。これは完璧でした、ありがとう!
hgolov 2013年


0

これを試して

select: function (event, ui) {
    $(this).val('');
    return false;       
}

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.