【问题标题】:jQuery Autocomplete submit form on select item, button click and/or enter?jQuery Autocomplete 在选择项目上提交表单,单击按钮和/或输入?
【发布时间】:2014-08-22 14:29:03
【问题描述】:

我正在尝试使用 jQuery Autocomplete 根据输入选择将用户重定向到 url。我已经看到其他问题解决了我的部分问题,但我无法将它们放在一起以提供以下功能:

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

Jsfiddle 演示 --> http://jsfiddle.net/wfaxvm43/5/

来源:
http://jsfiddle.net/DLLVw/
jQuery autocomplete trigger button on select
JQuery Autocomplete: Submit Form on selection?

$(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);
}

【问题讨论】:

  • 这对你有用吗? jsfiddle.net/wfaxvm43/7
  • 输入和按钮单击对我来说不起作用。我错过了 autoFocus: true,然后为按钮单击添加了另一个功能。

标签: javascript jquery html jquery-ui jquery-ui-autocomplete


【解决方案1】:

添加了自动对焦: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/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-02-11
    • 2013-08-07
    • 1970-01-01
    • 2023-03-29
    • 1970-01-01
    • 1970-01-01
    • 2013-10-18
    • 1970-01-01
    相关资源
    最近更新 更多