Скрыть значение параметра ввода поиска

При использовании входных данных для поиска список обычно создается из базы данных, где элемент будет иметь идентификатор и заголовок. Чтобы было проще связать, какое текстовое значение выбрано из входных данных поиска, я обычно устанавливаю значение в качестве идентификатора, например:

<input type="search" list="mylist">
<datalist id="mylist">
  <option value="1">Example</option>
  <option value="2">Test</option>
  <option value="3">Another one</option>
</datalist>

Но в Chrome и других браузерах, насколько я знаю, это приводит к тому, что значение является «основным» показанным для параметров, а заголовок - это подтекст под ним.

С точки зрения конечного пользователя это выглядит ужасно:

Ужасный вклад

Есть ли способ исправить это, чтобы «идентификатор» или значение не было видно, но это все равно значение, используемое при отправке формы?

JSFiddle

Всего 1 ответ


<form action="/action_page.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>


Есть идеи?

10000