Редактируемый Combobox в веб-интерфейсе

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

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

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

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

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

1
2
3
4
5
6
<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>

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

1
2
3
<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
21
<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(). Следующим кодом я настраиваю элемент управления так, чтобы в нем появился мигающий курсор.

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

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

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

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

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

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

Похожие статьи:

  • Нет похожих статей
Запись опубликована в рубрике Веб-разработка с тэгами , , , , . Создать закладку на запись. Оставить комментарий или trackback: Trackback URL.

25 комментариев

  1. Андрей
    Опубликован 4 Январь 2011 в 18:31 | Прямая ссылка

    Все хорошо получаеться, только вот с кириллица не вводиться в combobox, не у вас на сайте, не то что у меня получилось....

    • Опубликован 17 Январь 2011 в 0:12 | Прямая ссылка

      jQuery (selector).jec ({acceptedKeys: [{min:32, max:382}]});

      Подробнее можно почитать тут — code.google.com/p/jquery- ...ues/detail?id=46

      Спасибо за замечание 😉

      • Ustas
        Опубликован 14 Февраль 2011 в 11:41 | Прямая ссылка

        Увы, и так не работает.

        Пытаюсь пользовать jec-1.3.1 на jquery-1.5. Мало того, он ещё и все функциональные клавиши (F1-F12) превращает в буквы, в результате вместо обновления по F5 происходит вставка буквы t.

        • Опубликован 14 Февраль 2011 в 13:57 | Прямая ссылка

          Ха, забавно. Сейчас проверил то, что написал выше — тоже не пашет. Я помню, что все работало, т. к. сам проверял это решение. Один момент — я проверял это в Windows, а сейчас проверяю в Linux. Получается, что плагин воспринимает символы в системной кодировке клиента (что логично, т. к. JavaScript выполняется на стороне клиента). Так и вышло. Получается, что, если системная кодировка Юникод, вышеуказанные символы работать не будут — кириллические символы в Юникоде имеют другой диапазон. Я прописал так:

          jQuery («#s1»).jec ({acceptedKeys: [{min:32, max:382}, {min:1024, max:1327}, {min:11744, max:11775}, {min:42560, max:42655}]});

          и всё заработало. Последние три диапазона — десятичные номера всех кириллических символов в Юникоде. Первый диапазон — ASCII номера (и Windows-1251 тоже, они совпадают). Так что для максимальной совместимости следует указывать все диапазоны кириллицы возможных системных кодировок.

          • Павел
            Опубликован 20 Июнь 2013 в 17:29 | Прямая ссылка

            к сожалению даже так тупо не вводятся символы кирилицы — и так писал:

            jQuery («#s1»).jec ({acceptedKeys: [{min:32, max:382}, {min:1024, max:1327}, {min:11744, max:11775}, {min:42560, max:42655}]});

            и внутрь плагина пробовал — никакого эффекта...

          • Павел
            Опубликован 20 Июнь 2013 в 17:53 | Прямая ссылка

            вообщем поменял версию jQuery и все заработало! Спс)))

  2. Ustas
    Опубликован 14 Февраль 2011 в 14:51 | Прямая ссылка

    Получается, для интернационального интерфейса надо долго плясать с бубном юникодов, выбирая те, что нужно/не нужно отображать... Грустно. Да ещё и блокировка функциональных клавиш, с риском, что клиент, не заметив, начнёт отправлять испорченные этими «t» данные.

    Затея была красивой, но, увы, в нынешней реализации мне не подходит совсем.

    • Опубликован 14 Февраль 2011 в 15:09 | Прямая ссылка

      Ненужные символы можно обрабатывать на server-side, перед вставкой в БД или на уровне БД, заранее задав допустимый формат значения или пропустив через триггер. Так что, варианты есть 😉

  3. василий
    Опубликован 15 Июнь 2011 в 21:28 | Прямая ссылка

    Спасибо крутая вещь !!! вот только у меня проблема с обработкой введенного значения... я сча шаманю может что и получится ...

    но хотелось мнение знатока...

    вообщем я добавил этот элемент на jsp страницу.

    в свой select я вывожу данные из базы данные и + добавил этот с комбик ... все круто сначала идет редактируемое поле затем значения из базы...

    но как получать введенное значение ??? с теми которые были из базы я в сервлете request.getParameter («имя_select»)); и все ...

    а если было введено ручками ???

    как пристроить jQuery ('#text').text (jQuery ('#s1').val ()); ?

    спасибо если откликнитесь!

    • Опубликован 16 Июнь 2011 в 13:44 | Прямая ссылка

      > я в сервлете request.getParameter (“имя_select”)); и все …

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

      > как пристроить jQuery (‘#text’).text (jQuery (‘#s1′).val ()); ?

      Как хочешь. Этот код в моем примере выводит в блок введеное в selectbox значение по событию onClick. Так я показал работу примера — чтобы не писать server-side скрипты, использовал JavaScript.

  4. Nike
    Опубликован 8 Сентябрь 2011 в 21:41 | Прямая ссылка

    Спасибо за статью! Оч пригодилась.

    Можно в самом jquery.jec-1.3.2.js прописать в 48 строке

    acceptedKeys: [[32, 382], [191, 382], [1024, 1327], [11744, 11775], [42560, 42655]]

    Все работает.(проверял и на лине и на венде) Одно неудобство с F1-F12, но это только если стоит в фокусе данный комбобокс. Еще можно воспользоватся Ctrl+F5 — как альтернатива.

    • Опубликован 9 Сентябрь 2011 в 0:21 | Прямая ссылка

      Рад помочь :) .

      Можно, но тогда, если придется обновить скрипт, придется снова править его код.

  5. vitalka
    Опубликован 18 Октябрь 2011 в 13:21 | Прямая ссылка

    Спасибо за хорошую и нужную статью.

    Один вопрос: а как заставить мигать курсор сразу же после загрузки страницы? То есть без того что бы выбирать пустое значение списка.

    • Опубликован 19 Октябрь 2011 в 8:06 | Прямая ссылка

      Похоже, что для этого понадобится копаться во внутренностях плагина. Можно также попробовать связаться с разработчиком, может, он включит сам этот функционал в свой плагин

  6. vitalka
    Опубликован 18 Октябрь 2011 в 13:24 | Прямая ссылка

    моё предыдущее сообщение относится к цитате из статьи: "Если пользователь раскрывает список и наводит курсор на пустой элемент, в нем появляется мигающий курсор ... "

    Вот как бы сделать, что бы курсор мигал сразу при попадании, например, фокуса ...

  7. Опубликован 21 Декабрь 2011 в 12:19 | Прямая ссылка

    Привет всем! Оч полезный плагин) Хотелось бы узнать, как сделать чтобы вместо пустого значения было допустим «Выберите своё». Где это настраивается? Спасибо =)

    • Опубликован 21 Декабрь 2011 в 18:20 | Прямая ссылка

      Привет, можно попробовать вот так (вместе с кодом из последнего примера в статье):

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      jQuery("#s1").jec({"blinkingCursor": true, "blinkingCursorInterval": 500});
      $('#s1').jecValue('Выберите своё');
      $('#s1').focus(
          function(){
              if ($('#s1').jecValue() == 'Выберите своё') {
                  $('#s1').jecValue('');
              }
          }
      );

      $('#s1').blur(
          function(){
              if ($('#s1').jecValue() == '') {
                  $('#s1').jecValue('Выберите своё');
              }
          }
      );

      Пример можно посмотреть здесь: olezhek.net/wp-content/up...11/12/jec_3.html . Проверял в Opera 11.60 и Firefox 8.0 в Linux

  8. Виталий
    Опубликован 22 Декабрь 2011 в 15:01 | Прямая ссылка

    Привет!

    У меня не получается использовать какое-то событие в моем select при вводе символов в редактируемой строке комбобокса.

    Как можно реализовать обработку события для, например, ввода каждого символа ?

    Стандартное событие `onchange` — хорошо работает со всеми элементами селекта. И работает с введенным значением, но только после того как его повторно выбрать. А вот в момент ввода — не работает.

  9. Виталий
    Опубликован 22 Декабрь 2011 в 15:02 | Прямая ссылка

    Что то пример кода не вставился сразу: select id="pr" name="pr" onchange="vCalculateCost1 (this.value, {$dicsount_present}, false); "

    • Виталий
      Опубликован 22 Декабрь 2011 в 15:04 | Прямая ссылка

      Вот так проще пример будет:select id="pr" name="pr" onchange="vCalculate (this.value); "

      Извините, не разу понял как код вставлять.

  10. Tarka
    Опубликован 6 Апрель 2013 в 20:06 | Прямая ссылка
  11. barbaris
    Опубликован 26 Апрель 2013 в 13:02 | Прямая ссылка

    Очень напрягает, что элемент совсем не ведет себя, как редактируемый. Нет переходов влево-вправо. Нет прочих прелестей навигации по редактируемому контролу.

    Нашел более юзабельный плагин jonathan.tang.name/code/jquery_combobox

Оставить комментарий

Ваш e-mail никогда не будет опубликован или передан третьим лицам. Обязательные поля отмечены *

*
*