自动完成提交表单上的选择项目，按钮点击和/或输入

jQuery Autocomplete submit form on select item, button click and/or enter?

本文关键字：按钮 输入 项目 选择 提交 表单      更新时间：2023-09-26

我试图使用jQuery自动完成将用户重定向到基于输入选择的url。我已经看到了解决我的部分问题的其他问题，但是我很难把它们放在一起来提供以下功能:

在选择项目时触发重定向，以及按回车键和/或单击按钮。

Jsfiddle Demo -> http://jsfiddle.net/wfaxvm43/5/

来源:
http://jsfiddle.net/DLLVw/
jQuery自动完成触发按钮选择
JQuery自动完成:提交表单选择?

$(function () {
    var stateList = [{
        "value": "Tennessee",
            "url": "http://www.tennessee.gov"
    }, {
        "value": "Texas",
            "url": "http://www.texas.gov"
    }, {
        "value": "Colorado",
            "url": "http://www.colorado.gov"
    }, {
        "value": "Connecticut",
            "url": "http://www.ct.gov"
    }];
    $("#states").autocomplete({
        source: stateList,
        select: function (event, ui) {
            go(ui.item.url);
            // On enter key
            // if (event.keyCode == 13) {}
            // On button click
            //$(#'zip-form').submit()
        },
        response: function (event, ui) {
            if (!ui.content.length) {
                $("#no-result").show();
            } else {
                $("#no-result").hide();
            }
        }
    });
});
function go(url) {
    window.open(url);
}

添加了autoFocus: true;关注结果中的第一项。然后必须从焦点项中获取url。

focus: function (event, ui) {
        currentUrl = ui.item.url; 
}

function btnGoClick() {
if (currentUrl !== "") go(currentUrl);
}

在输入键重定向的输入字段上添加。keypress映射到13(回车键)。

$("#states").keypress(function (event) {
if (event.which == 13) {
    event.preventDefault();
    btnGoClick();
}
});

如果没有找到匹配，也设置一个指定的url。

http://jsfiddle.net/wfaxvm43/8/

相关文章：