CODEWITHSUNDEEP
javascriptjquery
user3953989
user3953989

Reputation: 1929

Jquery on Blur and on input conflict

I created a small AutoComplete object and list my results as a list of li elements. I have an this.on('input', function () {}); event that handles when you choose an item in the list and works fine. Now I want to add an blur event to hide results. Adding the blur events stops the input event from working.

$.fn.autoComplete = function () {

    this.on('input', function () {
        AutoComplete(self.val());
    });

    this.on('blur', function () {
        $('#' + settings.resultsDivId).hide();
    });

    function AutoComplete(term) {
        // ajax call
    });
};

Upvotes: 0

Views: 55

Answers (1)

combatc2
combatc2

Reputation: 1263

This worked in the following JSFiddle - it looks like you have an error after your AutoComplete function (it ends with ");"): https://jsfiddle.net/ek5v59t6/

$(function() {
     $('input').autoComplete();
});

$.fn.autoComplete = function () {
     this.on('input', function () {
        console.log('input fired');
        AutoComplete($(this).val());
    });

this.on('blur', function () {
        console.log('blur fired');
    $('#results').hide();
});

function AutoComplete(term) {
    $('#results').show();
}
};

Upvotes: 1

Related Questions