CODEWITHSUNDEEP
javascriptjquery
R B
R B

Reputation: 423

JQuery Autocomplete doesnt close

In my JQuery to display an autocomplete list, I have the following to close the list when clicked outside:

$(document).bind('click', function (event) {
        // Check if we have not clicked on the search box
        if (!($(event.target).parents().andSelf().is('#showmore'))) {           
            $(".ui-menu-item").display = 'none';
            $(".ui-menu-item").remove();            

        }
    });

The list closes but not completely! The following image shows a small white area beneath the text box.

enter image description here

The html on the page shows the following:

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: block; top: 423.5625px; left: 272.875px; width: 361px;"></ul>

Though I have closed the autocomplete and set its display to none, its still there! PLease help me resolve this.

Upvotes: 0

Views: 57

Answers (2)

mohamedrias
mohamedrias

Reputation: 18566

As per your code,

You must hide the ul instead of ui-menu-item.

So you must have $(".ui-menu").hide() to hide that white background element below the search box.

In your code,

if (!($(event.target).parents().andSelf().is('#showmore'))) {           
     $(".ui-menu").hide();  
}

And also you've following snippet in your code:

  $(".ui-menu-item").display = 'none';

which should be

  $(".ui-menu-item").hide();

There is no display property in jQuery wrapped dom element.

If you want to use display: none then do it with 

document.querySelectorAll(".ui-menu-item").style.display = "none";

Upvotes: 1

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

Try this out. I think your click outside is not working properly. And there is syntax error in the code as well. 

$(".ui-menu-item").display = 'none'; // this should be 
$(".ui-menu-item").hide(); //instead

$(document).mouseup(function (e)
{
    var container = $("ui-menu-item"); // change ui-menu-item to your desired one

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

Credits to this answer.

Upvotes: 1

Related Questions