在输入类型上按 'enter'= "text" ，如何？

Question

我正面临一个无法解决JQuery Javascript的问题。你能帮我，帮我理解吗？首先这是我的代码：

        (...)
        <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"键来执行搜索。当用户在输入自动压缩输入中时，我希望能够检测他是否按"输入"并启动提交。我读到我必须添加一个onkeyup="onKeyPressed（event）"事件，但我不明白如何编写与该命令关联的javascipt。我试过但没有成功...你们有适合我的解决方案吗？

谢谢

Answer 1

您应该将按键事件绑定到您的输入

$("#autoCompInput").bind("keypress", {}, keypressInBox);
function keypressInBox(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //Enter keycode                        
        e.preventDefault();
        $("yourFormId").submit();
    }
};

Answer 2

使用类似的 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();
    }
});

这是一个工作示例。

Answer 3

在 jquery 中分配 keyup 事件

 $("#autoCompInput").keyup(function(event) {
                if (event.keyCode==13) {
                    alert('enter key');
                }
            });

Answer 4

我认为这类

问题有一个更好、更标准的解决方案。

您可以在这些输入周围有一个 GET 表单，并且每当您在该表单中的任何输入上按 Enter 时，它都会提交到表单的 Action 属性中的任何内容。这就是它的样子（我拿走了你的代码，但我正在删除与我的答案无关的位）：

<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 表单。现在，可以通过对其中的任何输入（包括按钮）按 Enter 来触发提交事件，只要按钮没有属性 type="button"。

如果你想在进入搜索页面之前用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");
})