CODEWITHSUNDEEP
javascriptautocompletejquery-ui-autocomplete
user1527152
user1527152

Reputation: 956

javascript autocomplete close with a visual bug

I was trying to close my autocomplete list in javascript if the user click somewhere else, and found this great answer: Jquery Close autoComplete list

Since I do not have a "showmore" option like in the original question I adapted it as follow:

 $(document).bind('click', function (event) {
            $(".ui-menu-item").remove();
    });

However this code create a visual bug that you can see in the following screenshot:

Visual bug screenshot

And here is where in the code I added the block of code to handle closing the autocomplete: https://github.com/CUTR-at-USF/usf-mobullity/blob/mobullityrebase/src/client/js/otp/widgets/tripoptions/TripOptionsWidget.js#L294

I have tried to change .ui-menu-item to .ui-menu or .ui-autocomplete but these changed disabled the possibility to open the autocomplete list.

If you have an idea why there is this leftover of the autocomplete list and know how to fix it let me know. I assume it comes from .ui-menu-item but I'm not sure and what I have tried was unsuccessful.

Upvotes: 0

Views: 50

Answers (1)

Jos
Jos

Reputation: 2013

If you need the element to be used in future, You should try to hide the element instead of removing it. Also since changing remove to hide worked, so adding this answer just for the record.

Upvotes: 1

Related Questions