Remove suggestions when inputfield is not focused

Question

I'm creating an auto complete search box. The suggestions have to disappear when the user clicks outside the search field.

The form input field:

<input type="text" name="naam_textbox" id="naam_textbox" class="field" autocomplete="off" onkeyup="suggest(this.value, 'naam');" onblur="fill();" />

The javascript code:

function suggest(inputString, veld){
if(veld == "naam") {
    if(inputString.length < 2) {
        $('#suggestions_naam').fadeOut();
    } else {
    $('#naam_textbox').addClass('load');
        var dropdown = $( '<div class="suggestionsBox" id="suggestions_naam" style="display: none;"><div class="suggestionList" id="suggestionsList_naam"> &nbsp; </div></div>' );
        if (inserted_naam == 0) {
            dropdown.insertAfter( "#naam_textbox" );
            inserted_naam = 1;
        }
        $.post("includes/homepage/autosuggest_naam.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions_naam').fadeIn();
                $('#suggestionsList_naam').html(data);
                $('#naam_textbox').removeClass('load')
            }
        });
    }
}
}

function fill(thisValue, veld) {
    if(veld == "naam") {
        $('#naam_textbox').val(thisValue);
        setTimeout("$('#suggestions_naam').fadeOut();", 60);
    }
}

"fadeOut" makes the suggestions go away whenever the inputString is less then 2 characters, or when one of the suggestions is selected.

I need it also to fadeOut whenever someone clicks outside the input field (lose focus) or doesn't select a suggestion. To make it more clear, an image:

The suggestions should go away when a user clicks somewhere near the red dot for example. I can't get it to work, any help please?

Answer 1

Here is cause of the issue,

onblur="fill();" //no parameters

Whereas you method is

function fill(thisValue, veld) {   //2parameters
    if(veld == "naam") {
        $('#naam_textbox').val(thisValue);
        setTimeout("$('#suggestions_naam').fadeOut();", 60);
    }
}

MISSING TO PASS PARAMETERS and therefore it was not working.

so change it as

onblur = "fill(this.value, 'naam')"