Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Autocomplete Clear Button

Savage priority asked 11 months ago


Expected behavior Show an 'x' at the furthest right hand end of the AutoComplete input

Actual behavior No button (there aren't any instructions on how to accomplish this)

Resources (screenshots, code snippets etc.)

 <div class="form-outline" data-mdb-input-init id="title">
     <input type="text" id="autocomplete-title" class="form-control"/>
    <label class="form-label" for="autocomplete-title">Title</label>
</div>

JavaScript:

 // SETUP
const allTitles = []; // Array with all selectable titles
const dataFilter = (value) => {
    return allTitles.filter((item) => {
            return item.title.toLowerCase().startsWith(value.toLowerCase());
        });
    };
    const autoCompleteOptions = {
        filter: dataFilter,
        displayValue: (value) => value.title
    }; 
//Instantiation
    const autoComplete = document.getElementById('title');
    const ac = new mdb.Autocomplete(autoComplete, autoCompleteOptions);

If anyone could help me out, I would greatly appreciate it.

Thank you, T


Kamila Pieńkowska staff answered 11 months ago


I've prepared this, see if this is what you need: https://mdbootstrap.com/snippets/standard/kpienkowska/5888602?view=project#js-tab-view


Savage priority commented 11 months ago

I will try it this week.


Savage priority commented 11 months ago

I will try it this week.



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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: Web
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No