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');
});
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.
