Сегодня мне, в рамках поддержки одного из моих проектов, написанного на CakePHP, понадобилось создать небольшую формочку для добавления/редактирования данных. Во время проектирования графического интерфейса я понял, что в форме очень желательно присутствие Combobox’а. Причем нужно, чтобы он был редактируемый. То есть это тот же самый Select, но только с возможностью добавления своего значения прямо в момент ввода данных в форму. Таким способом я захотел расправиться с дополнительным интерфейсом для забивки данных в справочник. Такого элемента управления в HTML нет, и я пошел скрести по окрестностям интернета. И нашел вполне привлекательное решение.

Поиски навели меня на плагин для jQuery под названием jEC — jQuery Editable Combobox. Этот компонент, при помощи jQuery, подменяет все или определенные Selectbox’ы на форме редактируемым комбобоксом. Плагин реагирует только на <SELECT>. Таким образом, для того, чтобы получить редактируемый комбобокс на форме, надо сначала создать Selectbox.

Плагин, разумеется, требует jQuery. Разработчик jEC рекомендует использовать всегда самую свежую версию этого фреймворка. Чтобы всё это работало, сначала подключается jQuery, потом сам плагин к странице.

<head>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.jec.js"></script>
</head>

Версии продуктов я специально убрал из имён файлов — так легче потом скрипты обновлять. Далее необходимо всё это дело заставить работать. Для этого я набросаю такую форму:

<form id="form1" action="index.php?action=edit" method="POST">
  <select id="s1" name="s1" style="width: 100px;">
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
  </select>
</form>

После этого необходимо добавить следующий ниже код где-нибудь на странице, например, после испытуемого элемента управления:

<script language="javascript">
jQuery("#s1").jec();
</script>

Этим кодом я нашел элемент с нужным мне id и трансформировал его в редактируемый Combobox.

Вот и все. Этого уже достаточно, чтобы получить редактируемый Combobox. Он почти не отличается от обычного selectbox’а, за исключением того, что, к имеющимся элементам списка, добавляется пустой. Если выбрать его, то появится возможность вводить в него данные. После отправки формы будет отправлено именно введенное значение.

Вот так это выглядит:

Ниже полный исходный код страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.jec.js"></script>
  </head>
  <body>
    <form id="form1">
      <select id="s1" name="s1" style="width:100px;">
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
      </select>
      <script language="javascript">
        jQuery("#s1").jec();
      </script>
      <input type="button" onclick="jQuery('#text').text(jQuery('#s1').val());" value="Отправить" />
    </form>
    <div id="text"></div>
  </body>
</html>

Вроде можно и остановиться на этом. Однако, меня сразу смутило низкое юзабилити этого элемента управления — пользователь может и не догадаться, что для ввода своей информации ему необходимо выбрать пустой элемент в списке, ведь полученный Combobox выглядит немного по другому в отличие от привычного редактируемого Combobox’а из Windows. Хорошо, что у jEC есть неплохой набор опций для настройки этого элемента управления. Настройки вводятся в виде массива в качестве параметра метода jec(). Следующим кодом я настраиваю элемент управления так, чтобы в нем появился мигающий курсор.

jQuery("#s1").jec({"blinkingCursor": true, "blinkingCursorInterval": 500});

Параметр blinkingCursorInterval позволяет настроить интервал, с которым будет мигать курсор. Интервал задается в миллисекундах.

Если пользователь раскрывает список и наводит курсор на пустой элемент, в нем появляется мигающий курсор, который указывает на возможность ввода своего значения:

Кстати, эта возможность не будет работать в IE. В остальных браузерах курсор мигает, как ему и положено.

Плагин примечателен тем, что имеет еще несколько методов, при помощи которых можно управлять редактируемыми Combobox’ами — включать, выключать, удалять и создавать без необходимости иметь на форме элемент управления <SELECT>. Этот плагин также добавляет к функционалу jQuery два селектора — :editable и :uneditable. Их можно использовать для управления как новым вариантом Combobox’а, так и старым.

Что поглядеть: