Revision 737a6fd7
Von Moritz Bunkus vor etwa 4 Jahren hinzugefügt
| SL/Presenter/Tag.pm | ||
|---|---|---|
| 113 | 113 |
|
| 114 | 114 |
$collection = [] if defined($collection) && !ref($collection) && ($collection eq ''); |
| 115 | 115 |
|
| 116 |
my $with_filter = delete($attributes{with_filter});
|
|
| 117 |
my $fil_placeholder = delete($attributes{filter_placeholder});
|
|
| 116 | 118 |
my $value_key = delete($attributes{value_key}) || 'id';
|
| 117 | 119 |
my $title_key = delete($attributes{title_key}) || $value_key;
|
| 118 | 120 |
my $default_key = delete($attributes{default_key}) || 'selected';
|
| ... | ... | |
| 208 | 210 |
} @{ $collection };
|
| 209 | 211 |
} |
| 210 | 212 |
|
| 211 |
html_tag('select', $code, %attributes, name => $name);
|
|
| 213 |
my $select_html = html_tag('select', $code, %attributes, name => $name);
|
|
| 214 |
|
|
| 215 |
if ($with_filter) {
|
|
| 216 |
my $input_style; |
|
| 217 |
|
|
| 218 |
if (($attributes{style} // '') =~ m{width: *(\d+) *px}i) {
|
|
| 219 |
$input_style = "width: " . ($1 - 22) . "px"; |
|
| 220 |
} |
|
| 221 |
|
|
| 222 |
my $input_html = html_tag( |
|
| 223 |
'input', undef, |
|
| 224 |
autocomplete => 'off', |
|
| 225 |
type => 'text', |
|
| 226 |
id => $attributes{id} . '_filter',
|
|
| 227 |
'data-select-id' => $attributes{id},
|
|
| 228 |
(placeholder => $fil_placeholder) x !!$fil_placeholder, |
|
| 229 |
(style => $input_style) x !!$input_style, |
|
| 230 |
); |
|
| 231 |
$select_html = html_tag('div', $input_html . $select_html, class => "filtered_select");
|
|
| 232 |
} |
|
| 233 |
|
|
| 234 |
return $select_html; |
|
| 212 | 235 |
} |
| 213 | 236 |
|
| 214 | 237 |
sub checkbox_tag {
|
| css/kivitendo/main.css | ||
|---|---|---|
| 614 | 614 |
.cke_button {
|
| 615 | 615 |
padding: 0px; 6px !important; |
| 616 | 616 |
} |
| 617 |
|
|
| 618 |
/* selects with text filters */ |
|
| 619 |
div.filtered_select input, div.filtered_select select {
|
|
| 620 |
display: block; |
|
| 621 |
} |
|
| 622 |
|
|
| 623 |
div.filtered_select input {
|
|
| 624 |
background-image: url(../../image/glass14x14.png); |
|
| 625 |
background-repeat: no-repeat; |
|
| 626 |
background-position: 2px 2px; |
|
| 627 |
border-radius: 0px; |
|
| 628 |
border: solid #a0a0a0 1px; |
|
| 629 |
border-bottom: none; |
|
| 630 |
padding: 0px; |
|
| 631 |
padding-left: 20px; |
|
| 632 |
margin: 0; |
|
| 633 |
width: 500px; |
|
| 634 |
} |
|
| 635 |
|
|
| 636 |
div.filtered_select select {
|
|
| 637 |
width: 522px; |
|
| 638 |
} |
|
| css/lx-office-erp/main.css | ||
|---|---|---|
| 611 | 611 |
.cke_button {
|
| 612 | 612 |
padding: 0px; 6px !important; |
| 613 | 613 |
} |
| 614 |
|
|
| 615 |
/* selects with text filters */ |
|
| 616 |
div.filtered_select input, div.filtered_select select {
|
|
| 617 |
display: block; |
|
| 618 |
} |
|
| 619 |
|
|
| 620 |
div.filtered_select > input {
|
|
| 621 |
background-image: url(../../image/glass14x14.png); |
|
| 622 |
background-repeat: no-repeat; |
|
| 623 |
background-position: 2px 2px; |
|
| 624 |
border-radius: 0px; |
|
| 625 |
border: solid #a0a0a0 1px; |
|
| 626 |
border-bottom: none; |
|
| 627 |
padding: 0px; |
|
| 628 |
padding-left: 20px; |
|
| 629 |
margin: 0; |
|
| 630 |
width: 500px; |
|
| 631 |
} |
|
| 632 |
|
|
| 633 |
div.filtered_select select {
|
|
| 634 |
width: 522px; |
|
| 635 |
} |
|
| js/kivi.js | ||
|---|---|---|
| 350 | 350 |
editor.on('instanceReady', function() { ns.focus_ckeditor($e); });
|
| 351 | 351 |
}; |
| 352 | 352 |
|
| 353 |
ns.filter_select = function() {
|
|
| 354 |
var $input = $(this); |
|
| 355 |
var $select = $('#' + $input.data('select-id'));
|
|
| 356 |
var filter = $input.val().toLocaleLowerCase(); |
|
| 357 |
|
|
| 358 |
$select.find('option').each(function() {
|
|
| 359 |
if ($(this).text().toLocaleLowerCase().indexOf(filter) != -1) |
|
| 360 |
$(this).show(); |
|
| 361 |
else |
|
| 362 |
$(this).hide(); |
|
| 363 |
}); |
|
| 364 |
}; |
|
| 365 |
|
|
| 353 | 366 |
ns.reinit_widgets = function() {
|
| 354 | 367 |
ns.run_once_for('.datepicker', 'datepicker', function(elt) {
|
| 355 | 368 |
$(elt).datepicker(); |
| ... | ... | |
| 369 | 382 |
kivi.ChartPicker($(elt)); |
| 370 | 383 |
}); |
| 371 | 384 |
|
| 385 |
ns.run_once_for('div.filtered_select input', 'filtered_select', function(elt) {
|
|
| 386 |
$(elt).bind('change keyup', ns.filter_select);
|
|
| 387 |
}); |
|
| 372 | 388 |
|
| 373 | 389 |
var func = kivi.get_function_by_name('local_reinit_widgets');
|
| 374 | 390 |
if (func) |
Auch abrufbar als: Unified diff
L/P.select_tag: Unterstützung für Text-Filter
Gedacht für Selects mit size="123"-Attribut, die also als Liste und
nicht als Combobox gerendert werden.
Es wird direkt oberhalb der Select eine Text-Eingabezeile angezeigt,
die als dynamischer Filter für die Optionen verwendet wird. Bei jeder
Änderung (keyup) werden nur noch diejenigen Einträge in der Select
angezeigt, in deren Text der Suchfilter-Begriff irgendwo
vorkommt (ohne Berücksichtigung von Groß-/Kleinschreibung).
• with_filter=1 schaltet den Filter an
• filter_placeholder=LxERP.t8("Placeholder text") gibt einen
Platzhalter-Text an