10

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

谢谢，

4

4 回答 4

16

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

$("#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 中分配 keyup 事件

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

我认为对于这类问题有更好、更标准的解决方案。

您可以围绕这些输入创建一个 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 表单。现在，只要按钮没有属性 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 回答