jQuery-браузер метка / значение (ключевое слово / местоположение) автозаполнение с помощью кнопки отправки в window.location

Question

jQuery-браузер метка / значение (ключевое слово / местоположение) автозаполнение с помощью кнопки отправки в window.location

0

У меня есть простая метка/значение (ключевое слово/местоположение) jQuery AutoComplete, который отлично работает, что я хотел бы сделать, это добавить кнопку отправки, которая изменит значение 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>

Спасибо за понимание, которое вы могли бы предоставить!

user3139728 29 март 2014, в 19:28

Источник

Теги:

jquery

autocomplete

onsubmit

1 ответ

Ещё вопросы

pete · Accepted Answer · 2014-03-29T16-20-00.000Z

Один из способов сделать это - захватить как событие 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/

Это отлично, Пит, я просто заменил «keyup» на «keypress», чтобы пользователь мог быть уверен, что он направляется в нужное место. Большое спасибо, я собираюсь рассмотреть это очень внимательно.