Автозаполнение пользовательского интерфейса jQuery с полем скрытого идентификатора - PullRequest
Новая
       5

Автозаполнение пользовательского интерфейса jQuery с полем скрытого идентификатора

4 голосов
/ 03 февраля 2011

В настоящее время у меня есть HTML-форма со скрытым полем прямо перед вводом текста. Упрощенная версия ниже: 

<form>
    <input type="hidden" name="key" id="key" />
    <input type="text" name="account" id="account" />
    <input type="button" value="Submit" />
</form>

Ввод текста был оформлен с помощью автозаполнения пользовательского интерфейса jQuery. 

$("#account").click(function () {
    $(this).prev().val('');
    $(this).val('');
}).autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "AJAX.asmx/GetAccounts",
            data: "{ 'Search': '" + request.term + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        value: item.Value,
                        key: item.Key
                    }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus + ": " + errorThrown);
            }
        });
    },
    select: function (event, ui) {
        $(this).prev().val(ui.item.key);
    },
    change: function (event, ui) {
        if ($(this).prev().val() == '') {
            $(this).val('');
        }
    }
});

Сценарий, описанный выше, отлично работает, за исключением случаев, когда пользователь копирует и вставляет в него информацию. Большинство пользователей будут копировать, вставлять и нажимать «Отправить» задолго до того, как поиск в учетной записи AJAX закончится. Пользователь не знает, что они нужны скрипту, чтобы выбрать результат из выпадающего списка, иначе скрытое поле не будет заполнено. Однако большинство пользователей нетерпеливы и хотят делать что-то с минимальным нажатием кнопки.

Как мне перехватить пасту с одним результатом? Как я могу сделать это до того, как пользователь нажмет кнопку отправки?

Ответы [ 2 ]

2 голосов
/ 03 февраля 2011

Простой способ принудительного выбора из меню автозаполнения - перехватить событие отправки формы и вернуть false, если в #key нет чего-либо. 

//assuming there is only one form within web page
$('form').submit(
    function(){
        if($('#key').val() == '') {
            return false
        } else {
            return true
        }
    });
0 голосов
/ 03 февраля 2011

Вы можете попробовать использовать плагин Jorn Zafferer.У него есть опция, которую вы можете указать mustMatch, которая заставляет пользователя выбирать из списка.

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

If set to true, the autocompleter will only allow results that are presented by the backend. Note that illegal values result in an empty input box.

Затем вы можете использовать валидатор, чтобы убедиться, что поле имеетзначение.

...