1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: mdb-autocomplete

gobrien@bluelineinnovations.com pro asked 6 years ago

Hi, I am successfully using the mdb-autocomplete component.  The data list displays correctly when I start typing in the field.  But, if I enter data that is not in the list and I tab to another field on my form then the autocomplete list does not disappear.  It stays displayed and the only way to get rid of it is to make a selection in the list.I need to be able to allow the user to enter a value that is not in the list.  My application automatically adds new data values to the DB so that they appear in the list next time.I have a jQuery function that does an AJAX DB query when the autocomplete input looses focus.  Ideally I would like to invoke a hide method on the mdb-autocomplete component at that time.

Edyta Dabrowska free answered 6 years ago

Thank you for your suggestion! We will think about it in the future.

gobrien@bluelineinnovations.com pro answered 6 years ago

Note, the problem only occurs if the data I type into the mdb-autocomplete is not in the list.  For example, if the list contains "NH1234" and "NH5678" and I type "NH3456" then when the mdb-autocomplete input loses focus the list is still displayed and will not disappear until I actual enter something from the list or clear the field.

gobrien@bluelineinnovations.com pro commented 6 years ago

I added the following to autocomplete.js: // The following will close the autocomplete list when the input loses focus. This will allow // the user to enter a value that is not in the list $('.mdb-autocomplete').on('focusout', function() { $autocomplete.empty(); }); This will allow a user to enter data that partially matches items in the autocomplete list and the list will disappear when the autocomplete input loses focus. Perhaps you will want to add this to a future revision.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
gobrien@bluelineinnovations.com
Pro User 12Support score
2Questions 1Answers 0Snippets