JQuery - Предотвращение автозаполнения, запускающее размытие()

Ответ 1

Виджет пользовательского интерфейса jQuery автозаполнения имеет событие "изменения", которое, я думаю, делает то, что вы хотите. Он вызывается так же, как размытие, за исключением того, что он не вызывается, когда элемент выбирается с помощью мыши.

$("#input_field").autocomplete({
    source: "source.php",
    select: function( event, ui ) { alert("Item selected! Let not trigger blur!"); }
});
$("#input_field").bind('autocompletechange', function(event, ui) {
    alert("Alert if the user clicked outside the input, pressed enter, or tab button.");
    alert("But not from the item selection! :S");
});

Ответ 2

Основываясь на том, что я здесь видел, я поставил два образца кода вместе, чтобы создать то, что, как я считаю, является ответом; это было для меня:

$('#txtCatagory').autocomplete({ source: 'handlers/Catagories.ashx', minLength: 2,
    change: function (event, ui) {
        AddTag(event.srcElement.value);
        $('#txtCatagory').val('');
    },
    select: function (event, ui) {
        event.preventDefault();
        AddTag(ui.item.value);
        $('#txtCatagory').val('');
    }
});

Здесь мое текстовое поле:

<asp:TextBox runat="server" ID="txtCatagory" ClientIDMode="Static" OnKeyPress="return disableEnterKey(event)" />

Для меня это то, что я ввожу в текстовое поле, передается функции AddTag или что-то, что я выбираю из автозаполнения jQuery UI. Но критически это не пропускает то, что я набрал, ЕСЛИ я тогда использую автозаполнение, и он очищает поле, готовое для следующего ввода.

Как вы, возможно, догадались по имени функции AddTag, я использую это для пометки сообщений или продуктов, но благодаря сообщениям выше мне теперь удалось добавить автозаполнение этой функции.

Ответ 3

Я не знаю, как избежать onBlur для запуска, но я думаю, что у меня такая же проблема, и я решил это, проверив, открыто ли поле автозаполнения в функции onBlur.

HTML-декларация

<input id="autocompleteTextbox" type="text" onblur="onBlurFunction();" 
       onkeyup="onKeyUpFunction();" />

Javascript

var autocompleteOpen = false;
var itemSelected = false;

$("#autocompleteTextbox").autocomplete({

    source: function(request, response) {
        //Set source.
    },

    select: function(event, ui) {
        itemSelected = true;
    },

    open: function(event, ui) {
        autocompleteOpen = true;
    },

    close: function(event, ui) {
        autocompleteOpen = false;
        //A selection caused the close. Blur the autocomplete field.
        if (itemSelected) {
            document.getElementById("autocompleteTextbox").blur();
        }
    }
});


function onBlurFunction() {
    if (!autocompleteOpen) {
        //Do stuff.
    }
}

function onKeyUpFunction() {
    itemSelected = false;
}

Таким образом, код в onBlurFunction() не будет запущен, если автозаполнение открыто. itemSelected используется для проверки того, вводил ли пользователь текст в поле или что-то выбрал из списка автозаполнения. В функции закрытия я размываю поле, если пользователь выбрал что-то из списка. Я не знаю, имеет ли это значение в вашем случае.

Ответ 4

использовать event.stopPropagation();

$("#input_field").autocomplete({
    source: "source.php",
    select: function( event, ui ) { alert("Item selected! let not trigger blur!"); }
}).blur(function(event) {
event.stopPropagation();    
alert("noooooo! blur is still being called!");
});

или вы можете использовать event.preventDefault() таким же образом...

$("#input_field").autocomplete({
        source: "source.php",
        select: function( event, ui ) { alert("Item selected! let not trigger blur!"); }
    }).blur(function(event) {
    event.preventDefault();  
    });

ссылка event.preventDefault

Ответ 5

Вам может потребоваться более конкретное, но похоже, что вы все еще хотите, чтобы функция blur вызывалась при размытии, но вы не хотите, чтобы она вызывалась при начальной настройке; попробуйте что-то вроде этого...

$('#input_field').data('ready_to_blur',false)
    .blur(function(e) {
         if ($(this).data('ready_to_blur')) 
             return;
         $(this).data('ready_to_blur',true);
         event.stopPropagationImmediate();
    })
    .autocomplete({
         source: "source.php",
         select: function( event, ui ) { alert("Item selected! let not trigger blur!"); }
    })

Я также думаю, что вы захотите использовать stopPropagationImmediate. См. Документы: http://api.jquery.com/event.stopImmediatePropagation/

Ответ 6

очень простое решение для этой проблемы.

обработчик события unbind blur при отображении выпадающего списка, и связать обработчик события размытия после выбора.

добавление двух событий при инициализации автозаполнения

displaydropdowncallback: function(){ $("#AUTOTEXT").unbind("blur"); },
selectdatacallback: function (data) {
    $("#AUTOTEXT").blur(validatepostcode);
}

Изменить исходный код автозаполнения jquery:

добавление кода   options.displaydropdowncallback();

под

show: function () {
    var offset = $(input).offset();

добавление   options.selectdatacallback(selected.data);

под

function selectCurrent() {
        var selected = select.selected();

        if (!selected)
            return false;

Ответ 7

Запускайте событие, когда пользователь размывается из текстового фелда, чтобы показать ему маленький div с шириной 200 пикселей и высотой 100 пикселей с синим цветом фона и с жирным текстом, который сообщает ему, что "он не должен покидать это поле пустой"