Convertir campo selector en caja de búsqueda

Digamos que tienes un campo personalizado de Redmine de tipo “lista”. Los valores posibles son muy numerosos, por ejemplo las calles de una ciudad populosa. Si los usuarios tienen que recorrer todo el desplegable para encontrar su valor, esto puede ser confuso o llevar mucho tiempo.

Pero podemos convertir el desplegable en un cuadro de búsqueda, para que el campo sea más fácil de usar.

Como en otras píldoras de Redmine, utilizaremos el plugin View customize para realizar este cambio.

Crear una nueva vista en el plugin View customize

Type: JS

Path pattern: /issues

Insertion position: bottom of issue form

Código a incluir:

$(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');
});
IMPORTANTE
Copia todo el fragmento tal y como está, pero recuerda cambiar el id del campo personalizado “99” a su id de campo personalizado

Note: Nota: hemos probado esta solución con cientos, incluso miles de valores en el campo de la lista, y funciona perfectamente.

Estás interesado en más trucos del plugin View customize? Revisa estas otras Píldoras de Redmine.

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada.