better search usability fixes #128

anstiftung · Oct 5, 2023 · 74f6efb · 74f6efb
1 parent 95fdb6e
commit 74f6efb
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/templates/Workshops/all.php b/templates/Workshops/all.php
@@ -3,6 +3,9 @@
 use App\Controller\Component\StringComponent;
 
 echo $this->element('highlightNavi', ['main' => 'ORTE']);
+$this->element('addScript', ['script' =>
+ JS_NAMESPACE.".Helper.initWorkshopAllForm('body.workshops.all #list-search-form');"
+]);
 ?>
 
 <div class="left">

diff --git a/templates/element/listSearchForm.php b/templates/element/listSearchForm.php
@@ -20,10 +20,6 @@
 if (Configure::read('AppConfig.onlineEventsEnabled') && $showIsOnlineEventCheckbox) {
  echo $this->Form->control('isOnlineEvent', ['hiddenField' => false, 'type' => 'checkbox', 'label' => 'Online-Event?', 'checked' => $isOnlineEvent]);
 }
-echo $this->Form->button(__('Search'), [
- 'type' => 'submit',
- 'class' => 'button filter',
-]);
 
 if ($resetButton) { ?>
  <a href="<?php echo $baseUrl; ?>" class="button gray"><?php echo __('Clear'); ?></a>

diff --git a/webroot/js/helper.js b/webroot/js/helper.js
@@ -1035,12 +1035,41 @@ MappedRepairEvents.Helper = {
 
  },
 
+ bindOnSubmitLoader: function(form) {
+ $(form).on('submit', function() {
+ $('#content').css('opacity', .5);
+ });
+ },
+
+ triggerSubmitAfterTextInputKeyup: function(form) {
+ $(form).find('input[type="text"]').on('keyup', MappedRepairEvents.Helper.debounce(
+ function() {
+ $(form).submit();
+ }, 2000)
+ );
+ },
+
+ triggerSubmitAfterChange: function(form) {
+ $(form).find('input,select').on('change', function() {
+ $(this).closest('form').submit();
+ });
+ },
+
+ initWorkshopAllForm: function(form) {
+ MappedRepairEvents.Helper.bindOnSubmitLoader(form);
+ MappedRepairEvents.Helper.triggerSubmitAfterTextInputKeyup(form);
+ },
+
  /**
  * updates href of category links depending on input field value (keyword)
  * so that keyword is not lost if category button is clicked (instead of submit button)
  */
  initEventAllForm : function(form) {
 
+ MappedRepairEvents.Helper.bindOnSubmitLoader(form);
+ MappedRepairEvents.Helper.triggerSubmitAfterChange(form);
+ MappedRepairEvents.Helper.triggerSubmitAfterTextInputKeyup(form);
+
  $(form).find('input#keyword').on('keyup', function(event) {
 
  var keyword = $(this).val();