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

Question

Я пытаюсь предотвратить размытие при выборе: в автозаполнении называется. (выберите: вызывается при нажатии на элемент в окне предложения автозаполнения) Однако, непреднамеренно, размытие вызывается, когда я выбираю элемент из окна предложения. Как бы я решил эту проблему?

Вот как мой код в основном выстроен в линию.

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

Спасибо!

Редактировать: вот краткий контекст. Я пытаюсь разрешить пользователям искать / выбирать элемент или создавать новый элемент, если пользователь стирает данные.

Answer 1

Виджет автозаполнения JQuery UI поставляется с событием «изменение», которое, я думаю, делает то, что вы хотите.Он вызывается так же, как размытие, за исключением того, что он не вызывается при выделении элемента мышью.

$("#input_field").autocomplete({
    source: "source.php",
    select: function( event, ui ) { alert("Item selected! Let's 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");
});

Answer 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 AutoComplete, передается. Но, что критически, он не проходит то, что я набрал, если я использую автозаполнение, и он очищает поле, готовое к следующему вводу.

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

Answer 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 используется для проверки, вводил ли пользователь текст в поле или выбирал что-либо из списка автозаполнения. В функции закрытия я размываю поле, если пользователь выбрал что-то из списка. Я не знаю, имеет ли это смысл в вашем случае.

Answer 4

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

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

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

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;

Answer 5

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

Answer 6

Возможно, вам потребуется конкретизировать, но звучит так, как будто вы все еще хотите, чтобы какая-то функция 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's not trigger blur!"); }
    })

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

Answer 7

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

$("#input_field").autocomplete({
    source: "source.php",
    select: function( event, ui ) { alert("Item selected! let's 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's not trigger blur!"); }
    }).blur(function(event) {
    event.preventDefault();  
    });

ссылка event.preventDefault