Autocomplete Clear Button

Topic: Autocomplete Clear Button

Savage pro premium priority asked 12 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

Add comment

Kamila Pieńkowska staff answered 12 months ago