JQuery Autocomplete doesnt close

Question

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.

You're hiding the list items but actually you must hide the ul. Because yhe white background element is the ul which is being shown :) — mohamedrias, Mar 17 '15 at 17:41

mohamedrias · Accepted Answer · 2015-03-17T17:40:58.647

1

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";

edited Mar 17 '15 at 17:40

answered Mar 17 '15 at 16:44

mohamedrias

18,326
2
38
47

There is no point in hiding it, he removes it right after that. – blex Mar 17 '15 at 16:46
1

@blex Yes that's true. But the display property in jQuery wrapped object is wrong, that's why pointed it out. Need more code to predict the exact issue. But what i predict to be the issue is the parent element wrapping the autocomplete is being shown. – mohamedrias Mar 17 '15 at 16:51

score 1 · Answer 2 · edited May 23 '17 at 11:50

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.

JQuery Autocomplete doesnt close

2 Answers2