Браузерная метка/значение jQuery (ключевое слово/местоположение) Автозаполнение с кнопкой отправки в window.location

У меня есть простая метка/значение (ключевое слово/местоположение) 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>

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


jquery autocomplete onsubmit
person user3139728    schedule 29.03.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

person pete    schedule 29.03.2014
comment
Это идеальный Пит, я просто заменил «keyup» на «keypress», чтобы пользователь мог быть уверен, что он идет в нужное место. Большое спасибо, я собираюсь очень внимательно изучить это. - person user3139728; 29.03.2014