Формуляр за изпращане на jQuery Autocomplete върху избран елемент, щракване върху бутон и/или въвеждане?

Опитвам се да използвам jQuery Autocomplete, за да пренасоча потребител към URL въз основа на избора на вход. Виждал съм други въпроси, които се отнасят до части от проблема ми, но имам проблем да ги събера заедно, за да осигуря следната функционалност:

Пренасочване на задействане при избор на елемент, както и при натискане на клавиш enter и/или щракване върху бутон.

Демонстрация на Jsfiddle --> http://jsfiddle.net/wfaxvm43/5/

Източници:
http://jsfiddle.net/DLLVw/
JQuery бутон за задействане на автоматично довършване при избор
JQuery Autocomplete: Изпращане на формуляр при избор?

$(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
Enter и щракването върху бутон не работят на тази цигулка за мен. Липсваше ми 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