Test MegaShopManuál

by Petr Haluza

HTML

<div id="DownList">

<div id="searchHolder">Hledat sekce návodu: <input id="search" type="text" placeholder="Hledej.."></div>
<script type="text/javascript">

</script>

<style>
#searchArea.searchOn h4,
#searchArea.searchOn hr,
#searchArea.searchOn .duplicita { display:none}
#searchArea hr {border-top: 1px dashed #cde;}
#searchHolder { border: 1px dashed lightblue; background: #f5f5f5; font-size: 1.125em; display: flex; align-items: center; padding: 1em; margin: 1em 0 2em; gap: 1em; border-radius: .25em; font-weight: 600;}
#search { border: 1px solid lightblue; border-radius: .25em; box-shadow: 0 0 0 3px #c3cfdb5e; padding: 3px 15px; font-weight: 500;}
#searchArea .keywords { font-size:.1px; opacity:0}
</style>
<!--
<span class="keywords">xxx</span>
-->

<div id="searchArea">

<h4><b>Objednávky a zákazníci</b></h4>
<ul>
    <li><a href="https://b2b.100mega.cz/cs/novinky/11451-prehled-objednavek-a-prace-s-nimi">Přehled objednávek a práce s nimi</a><span class="keywords">dokumenty objednávka objednávky</span></li>
    <li><a href="https://b2b.100mega.cz/cs/novinky/11453-prehled-zakazniku">Přehled zákazníků</a></li>
    <li><a href="https://b2b.100mega.cz/cs/novinky/11517-reklamace-vasich-zakazniku">Reklamace vašich zákazníků </a></li>
</ul>

<hr>

<h4><b>Produkty v eshopu</b></h4>
<ul>
    <li><a href="https://b2b.100mega.cz/cs/novinky/11528-skryte-produkty-vyrazeni-z-nabidky-vaseho-megashopu">Skryté produkty (vyřazení z nabídky vašeho MegaShopu)</a></li>
    <li><a href="https://b2b.100mega.cz/cs/novinky/11512-vlastni-kategorie-produktu">Vlastní kategorie produktů</a></li>
    <li><a href="https://b2b.100mega.cz/cs/novinky/11516-vlastni-produkty">Vlastní produkty</a></li>
    <li><a href="https://b2b.100mega.cz/cs/novinky/11536-globalni-nastaveni-megashopu#oph">Omezení produktů jen na HAL3000</a></li>
    <li><a href="https://b2b.100mega.cz/cs/novinky/11536-globalni-nastaveni-megashopu#kons">Konfigurátor PC sestav</a></li>
</ul>

<hr>

<h4><b>Ceny a skladovost...

JavaScript

$(document).ready(function() {
  var regex = /[a-zA-Z0-9]/g;
  $("#search").on("keyup", function() { // když píšu do inputu
    var value = $(this).val().toLowerCase();
    $("#searchArea").addClass("searchOn"); // když je input vyplněn
    if (!this.value) {
      $("#searchArea").removeClass("searchOn"); // když je input prázdný
    } else {
      if (this.value.match(regex).length < 2) { 
        $("#searchArea").removeClass("searchOn"); 
        $("#searchArea").addClass("notEnough");
        $("#searchArea li").show();
      } else {
        $("#searchArea").removeClass("notEnough");
        $("#searchArea li").show().filter(function() { // Vyeberu všecna LI
          return $(this).text().toLowerCase().indexOf(value) === -1;
        }).hide(); // Skryju všechna LI, kde která neobsahují vallue
      }
    }
  });
});