10

JQueryJavascriptを解決できないという問題に直面しています。あなたは私を助け、私が理解するのを手伝ってくれますか？最初に私のコードがあります：

        (...)

        <script type="text/javascript">

        // Autocomplete suggestions
        $(function () {
            $("#autoCompInput").autocomplete({
                source: "/Suggestions",
                minLength: 3,
                select: function (event, ui) {
                    if (ui.item) {
                        $("#autoCompInput").val(ui.item.value);
                        $("form").submit();
                    }
                }
            });
        });

        // Provide search results
        $(function () {
            $("#autoCompSearch").click(function () {
                var searchParameters = $("#autoCompInput").val();

                var jsonData = JSON.stringify(searchParameters, null, 2);
                window.location = "/Search?criteria=" + searchParameters;
            });
        });

    </script>

    (...)

    <input class="ui-autocomplete-input" id="autoCompInput" role="textbox" aria-haspopup="true" size="50" autocomplete="off" aria-autocomplete="list" value = "@ViewBag.SearchInfo"/>
            <a id= "autoCompSearch" href = "#" ><img src="@Url.Content("~/Content/Menu/Images/magnifier.png")" alt="Search" /></a>

    (...)

このコードでは、「Enter」キーを使用して検索を実行することはできません。ユーザーが入力autoCompInputにいるときに、ユーザーが「Enter」を押して送信を開始したかどうかを検出できるようにしたいと思います。onkeyup = "onKeyPressed（event）"イベントを追加する必要があると読みましたが、コマンドに関連付けられたjavasciptの記述方法がわかりません。試しましたが成功しませんでした...解決策はありますか？

ありがとうございました、

4

4 に答える 4

16

keypressイベントを入力にバインドする必要があります

$("#autoCompInput").bind("keypress", {}, keypressInBox);

function keypressInBox(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //Enter keycode                        
        e.preventDefault();

        $("yourFormId").submit();
    }
};
于 2012-06-05T21:51:06.517 に答える
8

同様のHTMLの場合：

<input type="text" id="myTxt" />
<input type="submit" id="mySubmit" />

このスクリプト（最新のjQuery 1.7.2を使用）は次のことを実行する必要があります。

$('#mySubmit').click(function() {
    alert('Submitted!');
    return false;
});

$('#myTxt').on('keyup', function(e) {
    if (e.keyCode === 13) {
        $('#mySubmit').click();
    }
});

これが実際の例です。

于 2012-06-05T21:55:57.717 に答える
3

jqueryでキーアップイベントを割り当てるには

 $("#autoCompInput").keyup(function(event) {
                if (event.keyCode==13) {
                    alert('enter key');
                }
            });
于 2012-06-05T21:51:47.443 に答える
1

この種の問題には、より良い、より標準的な解決策があると思います。

これらの入力の周りにGETフォームを作成でき、そのフォーム内の入力でEnterキーを押すと、フォームのアクション属性にあるものすべてに送信されます。これはどのように見えるかです（私はあなたのコードを取りましたが、私の答えに関係のないビットを削除しています）：

<form id="idForJqueryOnly" action="/Search" method="GET">
  <input type="text" name="criteria" value="someuserinput"/>
  <button type="submit"><img src="...")" alt="Search" /></button>
</form>

これは標準的なブラウザの動作です。それで、フォームは何をしますか？送信されると、ブラウザは次のようなURLを作成します 。http：// yourserverguesedfromthecurrenturl / Search？criteria = someuserinput 何が起こったのか、ブラウザは名前と値（無効ではない）のすべての入力をフォームから取得し、URLフォームにシリアル化しました。これで、ボタンに属性type = "button"がない限り、ボタンを含む内部の入力のいずれかでEnterキーを押すことにより、送信イベントをトリガーできます。

検索ページに移動する前にjavascriptを使用してデータをさらに処理したい場合は、jqueryを使用してこれを実行できます。

$("#idForJqueryOnly").submit(function(){
   // here you can do stuff like serialize the form, or sanitize the input of tue user.
  var data = $("#idForJqueryOnly").serialize();
  $("[name=criteria]").val($("[name=criteria]").val().customSanitizeMethod());

  // if you return false, the form will not submit, say, for validation errors:
  return customValidator.isFormValid("#idForJqueryOnly");
})
于 2016-01-20T20:16:45.987 に答える