web-dev-qa-db-ja.com

jQueryオートコンプリート：選択時にフォームを送信しますか？

従来のHTMLフォームでのjQueryオートコンプリートの使用。

選択が行われたときにフォームを送信しようとする（昔ながらの方法）。

しかし、入力ボックスに入力してから、もう一度「戻る」を押すか、送信ボタンをクリックする必要があります。

私はいくつかのSO=の例を試しましたが、それらを機能させることができませんでした。

選択時にフォームを自動的に送信するにはどうすればよいですか？

jqueryformsautocompletesubmit
32
ILT

PDATE：私は最終的にこれを理解しました。以下のコードでうまくいくはずです。何らかの理由でchangeコールバックは機能しませんでしたが、close＆selectコールバックは機能しました。フィールドがフォーカスを失うとselectも呼び出されるため、closeを使用することをお勧めします。

$(function() {
    $("#searchField").autocomplete({
        source: "values.json",
        select: function(event, ui) { 
            $("#searchForm").submit(); }
    });
});

別の更新：わかりました。selectコールバックにも問題があります。これは、キーボードでオートコンプリートドロップダウンをトラバースし、 Enterキーを押すと、フォームが送信される前に入力が変更されます。ただし、マウスで選択すると、フォームは入力が変更される直前に送信されるため、送信される値はユーザーが入力したものだけです（オートコンプリートドロップダウンから選択したものではありません）。動作していると思われるWoraroundは次のとおりです。

$("#searchField").autocomplete({
    source: "values.json",
    minLength: 2,
    select: function(event, ui) { 
        $("#searchField").val(ui.item.label);
        $("#searchForm").submit(); }
});
50
bjudson
$( "#searchField" ).result(function(event, data, formatted) {
  $(this).closest("form").submit();
});

SearchFieldには選択したフィールドがすでに入力されているため、この関数で再度実行する必要はありません。

公式ドキュメント： http://docs.jquery.com/Plugins/Autocomplete/result#handler

7
tarkeshwar

@handsofatenの回答にはコメントできなかったので、ここで彼の回答に追加します。 labelではなくvalueを使用する方が理にかなっている場合があります。私の場合、ラベルがユーザーがデータベースを検索したい場合とは異なるためです。

$("#searchField").autocomplete({
source: "values.json",
minLength: 2,
select: function(event, ui) { 
    $("#searchField").val(ui.item.value);
    $("#searchForm").submit(); }
});
7
Crob

コードが他のページにある場合でも、このフィールドで[送信]ボタンIDを呼び出すことにより、選択したフィールドを送信します。

 document.getElementById('submit').click();
0
MD Shahrouq