Question

我有一个简单的标签/值（关键字/位置）jQuery自动完成功能完美，我想要做的是添加一个提交按钮，如果用户碰巧完成单词，将把window.location更改为该值没有点击自动完成下拉列表，或在完成搜索词后点击返回。这是完全基于浏览器的解决方案，没有后端。任何指向正确方向的人都将不胜感激！ 脚本如下：

$(document).ready(function() {
    var data = [
        {label: 'Stack Overflow', value: 'http://stackoverflow.com'},
        {label: 'Yahoo', value: 'http://yahoo.com'},
        {label: 'Google', value: 'http://google.com'},
        {label: 'Bing', value: 'http://bing.com'}
    ];

    $("input#autocomplete").autocomplete({
        source: data,
        focus: function (event, ui) {
            $(event.target).val(ui.item.label);
            return false;
        },
        select: function (event, ui) {
            $(event.target).val(ui.item.label);
            window.location = ui.item.value;
            return false;
        }
    });
});

HTML：

<input id="autocomplete" /> <button type="submit">Go</button>

感谢您提供的任何见解！

Answer 1

执行此操作的一种方法是捕获输入的keyup事件和按钮的click事件（或表单的submit事件，如果您有一个）并测试数据源的匹配：

$(document).ready(function() {
    var data = [
            {label: 'Stack Overflow', value: 'http://stackoverflow.com'},
            {label: 'Yahoo', value: 'http://yahoo.com'},
            {label: 'Google', value: 'http://google.com'},
            {label: 'Bing', value: 'http://bing.com'}
        ],
        autoNav = function (e) {
            var val = $("input#autocomplete").val().toLowerCase(),
                url = '';
            data.forEach(function (value, index, array) {
                if (value.label.toLowerCase() === val) {
                    url = value.value;
                }
            });
            if (url.length) {
                window.location.href = url;
            }
        };
    $("input#autocomplete").autocomplete({
        "source": data,
        "focus": function (event, ui) {
            $(event.target).val(ui.item.label);
            return false;
        },
        "select": function (event, ui) {
            $(event.target).val(ui.item.label);
            window.location = ui.item.value;
            return false;
        }
    }).on('keyup', autoNav);
    $('button[type="submit"]').on('click', autoNav);
});

小提琴：http://jsfiddle.net/EpuL2/

jQuery基于浏览器的标签/值（关键字/位置）自动完成，提交按钮到window.location

1 个答案: