Заполнение форм иногда кажется обременительным. Важно предоставить пользователям множественный выбор, но при этом дать им возможность свободно печатать. Элемент 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» в качестве параметров запроса.