jQuery Автозаполнение формы отправки при выборе элемента, нажатии кнопки и/или вводе?

Я пытаюсь использовать автозаполнение jQuery для перенаправления пользователя на URL-адрес на основе выбора ввода. Я видел другие вопросы, которые затрагивают части моей проблемы, но мне не удается собрать все вместе, чтобы обеспечить следующие функции:

Запускать перенаправление при выборе элемента, а также при нажатии клавиши ввода и/или нажатии кнопки.

Демонстрация Jsfiddle --> 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);
}

javascript html jquery jquery-ui jquery-ui-autocomplete
person grayspace    schedule 22.08.2014    source источник
comment
Это работает для вас? jsfiddle.net/wfaxvm43/7   -  person TimSPQR    schedule 22.08.2014
comment
Ввод и нажатие кнопки не работают на этой скрипке для меня. Мне не хватало autoFocus: true, а потом добавили еще одну функцию для нажатия кнопки.   -  person grayspace    schedule 25.08.2014

Ответы (1)


arrow_upward
0
arrow_downward

Добавлен автофокус: 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/

person grayspace    schedule 25.08.2014