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”键执行搜索。当用户在输入autoCompInput中时，我希望能够检测到他是否按下“输入”并启动提交。我读过我必须添加一个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();
    }
});

这是working example。

Answer 3

在jquery中分配keyup事件

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

Answer 4

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

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

Install

这是标准的浏览器行为。那么，表格的作用是什么？提交时，浏览器会创建一个这样的URL： http://yourserverguesedfromthecurrenturl/Search?criteria=someuserinput 发生的事情是浏览器从表单中获取了名称和值（而不是禁用）的所有输入，并将它们序列化为url形式。现在，只要按钮没有属性type =“button”，就可以通过在内部的任何输入上按Enter键来触发提交事件。

如果你想在进入搜索页面之前用javascript做更多的事情，你可以用jquery做到这一点：

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

在输入类型=“文本”上按“输入”，怎么样？

4 个答案: