templates/includes/side-navigation/search-form.html.twig line 1

Open in your IDE?
  2. <form method="get" id="searchform" autocomplete="off" onsubmit="return false;" class="search-bar">
  4.     <div id="searchContainer" class="search-result-wrp">
  5.         <!--                        <div class="page_navigation"></div>-->
  6.         <div id="searchResult" data-search-result></div>
  7.         <div id="pagination" class="pagination"></div>
  8.     </div>
  9.     <label>
  10.         <input type="search" placeholder="Suche" class="input-input font-light searchtext" name="s" type="text"/>
  11.     </label>
  15.     <div class="autocomplete-suggestions"></div>
  18. </form>
  19. <img src="/bundles/app/static/frontend/images/icons/lupe_neg.svg" alt="Lupe" class="lupe"/>
  21. <script type="text/javascript">
  23.     (function () {
  25.         var moduleName = 'main_module'; // naming convention XXX_module
  27.         if (typeof selt === 'undefined') {
  28.             selt = {
  29.                 modules: {}
  30.             };
  31.         } else if (!selt.modules) {
  32.             selt.modules = {};
  33.         }
  35.         selt.modules[moduleName] = {
  37.             name: moduleName,
  39.             init: function () {
  42.                 initSearchBar();
  43.                 paginage();
  44.                 initSearch();
  47.             }
  49.         };
  51.         function initSearchBar() {
  53.             var searchBarInput = $('[type="search"], .search-bar'),
  54.                 searchBar = $('.lupe'),
  55.                 searchContainer = $('main #searchContainer'),
  56.                 searchContainer2 = $('aside #searchContainer');
  58.             searchBar.on('click', function (e) {
  59.                 searchBarInput.toggleClass('focus');
  60.                 e.stopImmediatePropagation();
  61.             });
  64.         }
  66.         function initSearch() {
  68.             // get status modifier element
  69.             var searchResult = $('main #searchResult'),
  70.                 searchResult2 = $('aside #searchResult'),
  71.                 searchContainer = $('main #searchContainer'),
  72.                 searchContainer2 = $('aside #searchContainer'),
  73.                 searchform = $('main #searchform'),
  74.                 searchform2 = $('aside #searchform'),
  75.                 searchtext = searchform.find('.searchtext'),
  76.                 searchtext2 = searchform2.find('.searchtext');
  79.             // searchtext.on('keyup', function (e) {
  80.             //     instantSearch('keyupEvent', this.value);
  81.             // });
  83.             searchform.on('submit', function (e) {
  84.                 instantSearch('submit');
  85.             });
  86.             searchform2.on('submit', function (e) {
  87.                 instantSearch2('submit');
  88.             });
  90.             // auto complete
  91.             var xhr;
  92.             var ac = new autoComplete({
  93.                 selector: 'input[name="s"]',
  94.                 minChars: 2,
  95.                 source: function (term, response) {
  96.                     try {
  97.                         xhr.abort();
  98.                     } catch (e) {
  99.                     }
  100.                     xhr = $.getJSON('/search/autocomplete?render=1', {q: term}, function (data) {
  101.                         response(data);
  102.                     });
  103.                 },
  104.                 onSelect: function (e, term, item) {
  105.                     instantSearch('submit');
  106.                 },
  107.                 onSuggest: function () {
  108.                     searchContainer.stop(true, true).fadeOut();
  109.                 }
  110.             });
  112.             function instantSearch(welchesEvent, keyword) {
  114.                 var ausgabe = true;
  116.                 if (welchesEvent === 'submit') {
  117.                     keyword = searchtext.val();
  118.                 }
  120.                 searchContainer.stop(true, true).fadeIn();
  121.                 ac.hide();
  123.                 // Falls bereits eine Suche ausgeführt wurde oder noch läuft wird die Anzeige zurück auf
  124.                 // animierte punkte gesetzt
  125.                 searchResult.html('<svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 12" width="50">\n' +
  126.                     '  <circle fill="#000" stroke="none" cx="6" cy="6" r="6">\n' +
  127.                     '    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"></animate>\n' +
  128.                     '  </circle>\n' +
  129.                     '    <circle fill="#000" stroke="none" cx="26" cy="6" r="6">\n' +
  130.                     '    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"></animate>\n' +
  131.                     '  </circle>\n' +
  132.                     '    <circle fill="#000" stroke="none" cx="46" cy="6" r="6">\n' +
  133.                     '    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3"></animate>\n' +
  134.                     '  </circle>\n' +
  135.                     '</svg>');
  137.                 // In diesem nächsten Schritt erzeugen wir ein jQuery Get Objekt
  138.                 // und übermitteln die Such-Keywords
  140.                 var searchServiceUrl = '/search/list?q=' + keyword + '&render=1&lang='+$('html').attr('data-language');
  142.                 $.get(searchServiceUrl, function (data, success) {
  143.                     // Wenn der Parameter success auch success zurück gibt
  144.                     // wurde die GET Anfrage erfolgreich übertragen und Werte zurück geliefert
  145.                     if (success == 'success') {
  146.                         console.log(data);
  147.                         if (data.indexOf('search-result-item') >= 0) {
  148.                             searchResult.html(data);
  149.                             paginage();
  150.                         } else {
  151.                             searchContainer.stop(true, true).fadeOut();
  152.                         }
  153.                     }
  155.                 });
  156.             }
  158.             function instantSearch2(welchesEvent, keyword) {
  160.                 var ausgabe = true;
  162.                 if (welchesEvent === 'submit') {
  163.                     keyword = searchtext2.val();
  164.                 }
  166.                 searchContainer2.stop(true, true).fadeIn();
  167.                 ac.hide();
  169.                 // Falls bereits eine Suche ausgeführt wurde oder noch läuft wird die Anzeige zurück auf
  170.                 // animierte punkte gesetzt
  171.                 searchResult2.html('<svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 12" width="50">\n' +
  172.                     '  <circle fill="#000" stroke="none" cx="6" cy="6" r="6">\n' +
  173.                     '    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"></animate>\n' +
  174.                     '  </circle>\n' +
  175.                     '    <circle fill="#000" stroke="none" cx="26" cy="6" r="6">\n' +
  176.                     '    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"></animate>\n' +
  177.                     '  </circle>\n' +
  178.                     '    <circle fill="#000" stroke="none" cx="46" cy="6" r="6">\n' +
  179.                     '    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3"></animate>\n' +
  180.                     '  </circle>\n' +
  181.                     '</svg>');
  183.                 // In diesem nächsten Schritt erzeugen wir ein jQuery Get Objekt
  184.                 // und übermitteln die Such-Keywords
  186.                 var searchServiceUrl = '/search/list?q=' + keyword + '&render=1&lang='+$('html').attr('data-language');
  188.                 $.get(searchServiceUrl, function (data, success) {
  189.                     // Wenn der Parameter success auch success zurück gibt
  190.                     // wurde die GET Anfrage erfolgreich übertragen und Werte zurück geliefert
  191.                     if (success == 'success') {
  192.                         console.log(data);
  193.                         if (data.indexOf('search-result-item') >= 0) {
  194.                             searchResult2.html(data);
  195.                             paginage();
  196.                         } else {
  197.                             searchContainer2.stop(true, true).fadeOut();
  198.                         }
  199.                     }
  201.                 });
  202.             }
  205.         }
  207.         function paginage() {
  209.             var searchResultCollection = document.querySelectorAll('main #searchResult li'),
  210.                 searchResultCollection2 = document.querySelectorAll('aside #searchResult li'),
  211.                 itemsPerPage = 10,
  212.                 numberOfItems = searchResultCollection.length,
  213.                 pageCountFloat = numberOfItems / itemsPerPage,
  214.                 pageCount = Math.ceil(pageCountFloat),
  215.                 paginationCell = document.querySelector('main #pagination');
  216.                 paginationCell2 = document.querySelector('aside #pagination');
  218.             function updateResult() {
  220.                 var showFrom = (this.page - 1) * itemsPerPage,
  221.                     showTo = showFrom + itemsPerPage;
  223.                 searchResultCollection.forEach(function (item, index) {
  224.                     item.classList.remove('show');
  225.                     if (index >= showFrom && index < showTo) {
  226.                         item.classList.add('show');
  227.                     }
  228.                 });
  229.                 searchResultCollection2.forEach(function (item, index) {
  230.                     item.classList.remove('show');
  231.                     if (index >= showFrom && index < showTo) {
  232.                         item.classList.add('show');
  233.                     }
  234.                 });
  236.                 paginationCell.classList.add('hide');
  237.                 if (pageCount > 1) {
  238.                     paginationCell.classList.remove('hide');
  239.                 }
  240.                 paginationCell2.classList.add('hide');
  241.                 if (pageCount > 1) {
  242.                     paginationCell.classList.remove('hide');
  243.                 }
  245.             }
  247.             selt.pagination.Init(document.querySelector('main #pagination'), {
  248.                 size: pageCount
  249.             }, updateResult);
  251.             selt.pagination.Init(document.querySelector('aside #pagination'), {
  252.                 size: pageCount
  253.             }, updateResult);
  256.         }
  259.     }());//EOS
  262. </script>