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');
});
IMPORTANT
Copy the whole snippet as it is, but please remember to change the custom field id from “99” to your custom field id

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.

About The Author

2 thoughts on “Convert select field to search box”

  1. Miguel Ángel De La Cruz

    Genial Luis. Lo he aplicado en nuestra implantación de redmine y es muy útil para facilitar el uso de campos con múltiples valores, como es el caso de Municipio, o campos de tipo Usuario.

Leave a Comment

Your email address will not be published.