список данных приземлился в Chrome Canary

Заполнение форм иногда кажется обременительным занятием. Важно предоставить пользователям возможность выбора, но при этом позволить им свободно печатать. Элемент datalist (который только что появился в Chrome Canary (M20) упрощает эту задачу.

Используя datalist , ваше приложение может определить список предлагаемых результатов, из которых пользователи должны выбрать. Они могут либо выбрать вариант из списка, либо ввести текст произвольной формы.

Живая демонстрация:

Параметры можно объединить со datalist , указав его id в атрибуте list input элемента:

<input type="text" value="" list="fruits" />
<datalist id="fruits">
    <option value="Apple"></option>
    <option value="Orange"></option>
    <option value="Peach"></option>
</datalist>

datalist широко доступен в последних версиях Firefox, Opera и Internet Explorer после версии 10. Поэтому вам не нужно слишком беспокоиться о совместимости, но если вы хотите убедиться, что он работает во всех браузерах, попробуйте следующее:

<datalist id="fruits">
    Pick your favorite fruit
    <select name="fruit_sel">
    <option value="Apple">Apple</option>
    <option value="Orange">Orange</option>
    <option value="Peach">Peach</option>
    </select>
    or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />

Если datalist доступен в вашем браузере, все, что находится под datalist , кроме элементов option , будет скрыто. Если вы используете этот резервный механизм, убедитесь, что ваш сервер улавливает как «fruit_sel», так и «fruit» в качестве параметров запроса.