Form Elements edit

  
    content_copy
  
  
<form action="#">
  <div class="row mb-4">
    <div class="col">
      <div class="form-outline">
        <input class="form-control" id="first_name" type="text" required />
        <label class="form-label" for="first_name">First Name</label>
        <span class="form-helper">Example helper text</span>
      </div>
    </div>
    <div class="col">
      <div id="basic" class="form-outline">
        <input type="text" id="autocomplete" class="form-control" />
        <label class="form-label" for="autocomplete">Autocomplete</label>
      </div>
    </div>
  </div>
  <div class="row my-2">
    <div class="col">
      <div class="form-outline">
        <input
          class="form-control"
          disabled
          value="I am not editable"
          id="disabled"
          type="text"
        />
        <label class="form-label" for="disabled">Disabled</label>
      </div>
    </div>
    <div class="col">
      <select class="select" id="options">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <label class="form-label select-label" for="options"
        >Select Option</label
      >
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="form-outline">
        <input
          class="form-control"
          id="password"
          type="password"
          required
        />
        <label class="form-label" for="password">Password</label>
      </div>
    </div>
    <div class="col">
      <div class="form-outline">
        <input class="form-control" id="email" type="email" required />
        <label class="form-label" for="email">Email</label>
      </div>
    </div>
  </div>
  <div class="row my-2">
    <div class="col">
      <div class="form-outline datepicker">
        <input type="text" class="form-control" id="exampleDatepicker11" />
        <label for="exampleDatepicker11" class="form-label"
          >Select a date</label
        >
      </div>
    </div>
    <div class="col"></div>
  </div>
  <div class="row my-2">
    <div class="col-md-6">
      <label for="file" class="form-label">Select a file</label>
      <input class="form-control" id="file" type="file" />
    </div>
  </div>
  <div class="row my-2">
    <div class="col">
      <div class="form-check form-switch">
        <input
          class="form-check-input"
          type="checkbox"
          role="switch"
          id="switch"
        />
        <label class="form-check-label" for="switch">Switch</label>
      </div>
    </div>
    <div class="col">
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          id="checkMe"
          checked
        />
        <label class="form-check-label" for="checkMe">Check me out</label>
      </div>
    </div>
  </div>
</form>
  

Script required to initialize the autocomplete

  
    content_copy
  
  
  const basicAutocomplete = document.querySelector('#basic');

  const data = ['One', 'Two', 'Three', 'Four', 'Five'];

  const dataFilter = (value) => {
    return data.filter((item) => {
      return item.toLowerCase().startsWith(value.toLowerCase());
    });
  };

  if (basicAutocomplete) {
    new mdb.Autocomplete(basicAutocomplete, {
      filter: dataFilter,
    });
  }