如何在自动完成 jquery 中提交有关选择项目的表单？答案

【问题标题】：How do I submit a form on selection of an item in autocomplete jquery?如何在自动完成 jquery 中提交有关选择项目的表单？
【发布时间】：2023-03-07 20:23:01
【问题描述】：

这是我的应用的 JavaScript 和 HTML

<script>
$(function() {
    $( "#searchfield" ).autocomplete({
        source: "http://localhost/search.php",
        minLength: 1,
        select: function( event, ui ) {
                        $("#search_form").submit(); 
        }
    });
});
</script>

<form id="search_form" action="search" method="get">
                <input id="searchfield" type="text" name="q" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
                <input id="searchbutton" type="submit" name="submit" value="Search" />
                </p>
            </form>

我希望当有人从下拉菜单中对所选项目按下回车键时。表格应该提交。和 Page 导航到目标页面。问题是这段代码不起作用。当我按下回车键时，表单没有提交。请给我一些代码。谢谢

在这种情况下，我想提交表单。

【问题讨论】：

我觉得没问题，请解释“不工作”。有什么错误吗？
@David 表单应该在有人点击进入时提交。但是当我点击进入时它不起作用

标签： javascript jquery html autocomplete

【解决方案1】：

当按下 ENTER 键并打开菜单时，该插件可防止事件冒泡：

case keyCode.ENTER:
case keyCode.NUMPAD_ENTER:
    // when menu is open and has focus
    if (self.menu.active) {
        // #6055 - Opera still allows the keypress to occur
        // which causes forms to submit
        suppressKeyPress = true;
        event.preventDefault();
    }

您可以重新绑定 keydown 事件并检查是否按下 ENTER 键以提交表单：

$( "#searchfield" )
    .autocomplete()
    .bind('keydown', function() {
        var key = event.keyCode;
        if (key == $.ui.keyCode.ENTER || key == $.ui.keyCode.NUMPAD_ENTER) {
            $('#search_form').submit();
        }
    });

DEMO

【讨论】：

您可能想要删除debugger; 语句。
是的，刚刚从我的 jsfiddle 复制粘贴。只需要 10 秒来重新格式化我的答案 ;-)
@DidierGhys 我已经更新了问题。请查看此内容并回答我
我希望如果用户在下拉菜单建议中的选定项目上按 Enter 键，则应提交表单
@DidierGhys 但它只是填写了输入字段并没有提交表单