Application Selects Datalist

<label for="Headline">
      <span class="text-sm font-medium text-gray-700"> Headliner </span>

      <div class="relative">
        <input
          type="text"
          id="Headline"
          list="HeadlineList"
          placeholder="Please select"
          class="mt-0.5 w-full rounded border-gray-300 pe-8 shadow-sm sm:text-sm [&::-webkit-calendar-picker-indicator]:opacity-0"
        />

        <span class="absolute inset-y-0 right-0 grid w-8 place-content-center text-gray-700">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-4"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
          </svg>
        </span>
      </div>

      <datalist name="Headline" id="HeadlineList">
        <option value="JM">John Mayer</option>
        <option value="SRV">Stevie Ray Vaughn</option>
        <option value="JH">Jimi Hendrix</option>
        <option value="BBK">B.B King</option>
        <option value="AK">Albert King</option>
        <option value="BG">Buddy Guy</option>
        <option value="EC">Eric Clapton</option>
      </datalist>
    </label>