Фильтрующий мультиблок combobox shuttle/transfer widget

Фон

Я ищу jQuery или JavaScript-виджета combobox shuttle, который позволяет пользователю фильтровать исходный список. Исходный список - это поле со списком (слева), а список адресатов - второе поле со списком (справа).

Mockup

Виджет должен напоминать:

mockup

Существующий jQuery виджет:

Bootstrap Transfer

Использование

Пользователь может:

  • Введите регулярное выражение для фильтрации списка источников (например, Toy.*).
    • Виджет скрывает все элементы, которые не соответствуют выражению фильтра.
  • Выберите один или несколько элементов в исходном списке (с помощью щелчков, щелчка по кнопке управления и выбора смены).
  • Нажмите >>, чтобы перенести элементы из списка источников в список адресатов.
  • Очистите фильтр, чтобы открыть полный список источников.

Технические

В идеале, в comboboxes будет использоваться комбинированное выделение HTML, и разметка будет тривиальной:

<select name="sourceList" id="sourceList" size="20" multiple="multiple">
  <option value="1">Toyota</option>
  <option value="2">Mitsubishi</option>
  <option value="3">Nintendo</option>
  <option value="4">Samsung</option>
  <option value="5">Bank of Kyoto</option>
</select>

<select name="destinationList" id="destinationList" size="20" multiple="multiple">
  <option value="6">Mazda</option>
  <option value="7">Fuji</option>
  <option value="8">Honda</option>
</select>

<script>
  $('#sourceList').shuttle();
</script>

Выводы

Они близки:

Они почти идеальны:

Я собираюсь заказать назначение категорий для 3000 - 5000 предметов и подумал, что это будет быстрый способ достичь такого успеха. (Названия японских компаний являются чисто вымышленными, на самом деле имена обычно содержат слово или фразу.)

Вопрос

Что такое бесплатный и открытый исходный код (jQuery или чистый JavaScript), который отвечает этим требованиям?

Связанные

Ссылки по теме:

Ответы

Ответ 1

Решение

Реализована желаемая функциональность:

  • Поиск регулярных выражений
  • Поддержка интернационального сравнения
  • Использует jQuery
  • Позволяет выбрать несколько вариантов
  • Использует один элемент <select>
  • Чрезвычайно простой API
  • Автоматическая настройка ширины виджета

Исходный код и демонстрация

http://jsfiddle.net/U8Xre/

Известные проблемы

Передача элементов не обновляет массив поиска, что приводит к дублированию элементов.