Convert select field to search box

Let's say you've got a Redmine custom field of type “list”. The possible values are very numerous, for instance the streets of a populous city. If the users have to go through the whole dropdown to find their value, this can be confusing or time consuming.

But we can convert the dropdown into a search box, to make the the field more user friendly.

As in other Redmine Pills, we will use the View customize plugin to perform this change.

Create a new view in the View customize plugin

Type: JS

Path pattern: /issues

Insertion position: bottom of issue form

Code snippet:

$(function() {
  const replaceSelectToAutocomplete = function(selectElement) {
    const $select = $(selectElement);
    if ($select.length == 0) {
      return;
    }
    const options = $select.find('option[value!=""]')
      .map(function() {
        const $option = $(this);
        return {
          label: $option.text(),
          optionValue: $option.val()
        };
      })
      .toArray();
    const $autocomplete = $('<input type="text" class="ui-autocomplete-input autocomplete" autocomplete="off">');
    const applyToAutocomplete = function() {
      const currentSelectValue = $select.val();
      if (currentSelectValue != '') {
        const initAutcompleteValue = $.grep(options, function(option) {
          return option.optionValue == currentSelectValue;
        })[0].label;
        $autocomplete.val(initAutcompleteValue);
      }
    }
    const applyToSelect = function() {
      const inputValue = $autocomplete.val();
      const matchOption = $.grep(options, function(option) {
        return option.label == inputValue;
      })[0];
      if (matchOption != null) {
        $select.val(matchOption.optionValue).change();
      } else {
        $autocomplete.val('');
        $select.val('').change();
      }
    }
    $autocomplete
      .autocomplete({
        source: options,
        minLength: 0,
        select: function(event, ui) {
          $select.val(ui.item.optionValue).change();
        }
      })
      .on('blur ', applyToSelect)
      .on('keypress', function(event) {
        if (event.key == 'Enter') {
          return false;
        } 
      });
    applyToAutocomplete();
    $select
      .on('change', applyToAutocomplete)
      .hide()
      .after($autocomplete);
  }
    // replaceSelectToAutocomplete('#issue_assigned_to_id');
  replaceSelectToAutocomplete('#issue_custom_field_values_99');
});

Note: we have tested this solution with hundreds, even thousands of values in the list field, and it works perfectly.

Are you interested in more tricks for the View customize plugin? Check these other Redmine Pills.