[js] search a li

C

Costas

Administrator
Staff member
HTML: 
<style>
 .hiME { display:none!important; }
</style>

<script>

    function SearchList(e){

      if (e.key === "Enter") {
        e.preventDefault();
        
        const nodes = Array.from(document.querySelectorAll("li"));
        nodes.forEach((i) => i.classList.remove("hiME"));
        nodes.filter((i) => !i.textContent.toLowerCase().includes(e.target.value.toLowerCase())).forEach((i) => i.classList.add("hiME"));
      }
    }

</script>


<input id="txtSearch" onkeypress="SearchList(event);" placeholder="press enter to search">


<section class="content"><article class="markdown-section" id="main"><div id="docsify-darklight-theme"><p>.</p></div><h2 id="_27042023"><a href="#/stories/greece?id=_27042023" data-id="_27042023" class="anchor"><span>27/04/2023</span></a></h2>
<ul><li><a href="https://www.kathimerini.gr/politics/562392091/kopike-apo-ton-areio-pago-to-komma-emfietzogloy-mpogdanoy/" target="_blank" rel="noopener">Κόπηκε από τον Αρειο Πάγο το κόμμα Εμφιετζόγλου - Μπογδάνου</a><ul><li><a href="https://www.ieidiseis.gr/politiki/195449/xountiki-methodefsi-tou-systimatos-mitsotaki-to-kopsimo-bogdanou-stis-ekloges-i-proti-antidrasi-tis-patriotikis-enosis" target="_blank" rel="noopener">Χουντική μεθόδευση του συστήματος Μητσοτάκη το κόψιμο Μπογδάνου στις εκλογές</a></li><li><a href="https://www.documentonews.gr/article/mploko-areioy-pagoy-sto-komma-emfietzogloy-mpogdanoy-gia-onomatoklopi-kai-sfeterismo-symvoloy/" target="_blank" rel="noopener">Καθεστωτική μεθόδευση</a></li></ul></li><li><a href="https://www.makeleio.gr/%ce%b5%cf%80%ce%b9%ce%ba%ce%b1%ce%b9%cf%81%ce%bf%cf%84%ce%b7%cf%84%ce%b1/%ce%a4%ce%99-%ce%a3%ce%97%ce%9c%ce%91%ce%94%ce%99-%ce%95%ce%99%ce%a7%ce%95-%ce%9f-%ce%a0%ce%9f%ce%a3%ce%a4%ce%97%ce%a3-%ce%93%ce%b9%ce%b1-%cf%80%cf%81%cf%8e%cf%84%ce%b7-%cf%86%ce%bf%cf%81%ce%ac/" target="_blank" rel="noopener">Για πρώτη φορά αφαιρέθηκε σφαίρα από την κλειτορίδα γυναίκας</a></li><li><a href="https://www.makeleio.gr/%ce%b5%cf%80%ce%b9%ce%ba%ce%b1%ce%b9%cf%81%ce%bf%cf%84%ce%b7%cf%84%ce%b1/%ce%9f%ce%b9-%cf%83%cf%85%ce%bb%ce%bb%ce%ae%cf%88%ce%b5%ce%b9%cf%82-%cf%80%ce%ad%cf%86%cf%84%ce%bf%cf%85%ce%bd-%ce%b2%cf%81%ce%bf%cf%87%ce%ae-%cf%83%cf%84%ce%b7-%ce%9c%cf%8d%ce%ba%ce%bf%ce%bd%ce%bf/" target="_blank" rel="noopener">Οι συλλήψεις πέφτουν βροχή στη Μύκονο! Άλλοι δύο εργάτες συνελήφθησαν για παράνομες εργασίες</a></li><li><a href="https://www.tiktok.com/@dora_bakoyannis/video/7226620886349139227" target="_blank" rel="noopener">Τι λες μωρή καριόλα; @Ντόρα Μπακογιάννη</a></li><li><a href="https://www.makeleio.gr/%ce%b5%cf%80%ce%b9%ce%ba%ce%b1%ce%b9%cf%81%ce%bf%cf%84%ce%b7%cf%84%ce%b1/%ce%97-%ce%9a%cf%85%ce%b2%ce%ad%cf%81%ce%bd%ce%b7%cf%83%ce%b7-%cf%84%ce%b7%cf%82-%ce%a4%cf%83%ce%b5%cf%87%ce%af%ce%b1%cf%82-%ce%b5%cf%80%ce%ad%ce%b2%ce%b1%ce%bb%ce%b5-%cf%83%ce%ba%ce%bb%ce%b7%cf%81/" target="_blank" rel="noopener">Η Κυβέρνηση της Τσεχίας επέβαλε σκληρές κυρώσεις στον Μόσχας Κύριλλο</a></li><li><a href="https://www.facebook.com/tsiprasalexis/videos/769416011473375" target="_blank" rel="noopener">Τσίπρας - στον λούστρο Παπαδάκη</a></li><li><a href="https://www.grtimes.gr/ellada/sok-sti-chalkidiki-me-to-xenodocheio-quot-big" target="_blank" rel="noopener">Χαλκιδική με το ξενοδοχείο /Big Brother/ - Κάμερες έμοιαζαν με… φορτιστές τηλεφώνων</a></li><li><a href="https://www.documentonews.gr/article/kalyptei-smyrli-gia-predator-kai-ntogiako-gia-paremvasi-stin-adae-o-skertsos/" target="_blank" rel="noopener">Καλύπτει Σμυρλή για Predator και Ντογιάκο για παρέμβαση στην ΑΔΑΕ ο Σκέρτσος</a></li><li><a href="https://www.ieidiseis.gr/kosmos/195394/tourkia-iogenis-gastrenteritida-kathilose-ton-erntogan-mataiothikan-kai-simera-oi-emfaniseis-tou" target="_blank" rel="noopener">Τουρκία - Ιογενής γαστρεντερίτιδα καθήλωσε τον Ερντογάν - Ματαιώθηκαν και σήμερα οι εμφανίσεις του</a></li><li><a href="https://www.ieidiseis.gr/parapolitika/195397/entones-apodokimasies-kai-giouxaismata-ston-mitsotaki-stin-kavala" target="_blank" rel="noopener">Έντονες αποδοκιμασίες και γιουχαΐσματα στον Μητσοτάκη στην Καβάλα</a></li><li><a href="https://www.ieidiseis.gr/politiki/195414/stin-evelpidon-ayrio-o-ilias-kasidiaris" target="_blank" rel="noopener">Στην Ευελπίδων αύριο ο Ηλίας Κασιδιάρης</a></li><li><a href="https://www.businessnews.gr/politiki/item/262771-tsipras-ayksisi-misthon-meiosi-timon-rythmisi-xreon-to-triptyxo-ton-desmeyseon-tou-syriza" target="_blank" rel="noopener">Τσίπρας - Αύξηση μισθών, μείωση τιμών, ρύθμιση χρεών το τρίπτυχο των δεσμεύσεων του ΣΥΡΙΖΑ</a></li><li><a href="https://www.businessnews.gr/prosopa/item/262782-tzortz-tsoynis-logistics-hub-tou-nato-i-ellada-tha-evnoithei-oikonomika-kai-apo-tin-anoikodomisi-tis-oukranias" target="_blank" rel="noopener">Τζορτζ Τσούνης - Logistics hub του ΝΑΤΟ η Ελλάδα</a></li><li><a href="https://www.businessnews.gr/epixeiriseis/texnologia/item/262788-ptosi-12-stis-poliseis-smartphones-to-a-trimino-tou-2023" target="_blank" rel="noopener">Πτώση 12% στις πωλήσεις smartphones το α' τρίμηνο του 2023</a></li><li><a href="https://www.businessnews.gr/epixeiriseis/item/262792-taiped-parousiasi-tou-ethnikoy-sxediou-anadasosis-apo-koinoy-me-to-ypourgeio-perivallontos-kai-energeias" target="_blank" rel="noopener">ΤΑΙΠΕΔ - Παρουσίαση του Εθνικού Σχεδίου Αναδάσωσης από κοινού με το Υπουργείο Περιβάλλοντος και Ενέργειας</a></li><li><a href="https://www.kathimerini.gr/culture/tv/562391779/to-black-mirror-epistrefei-pio-skoteino-kai-anapantecho-apo-pote-to-treiler/" target="_blank" rel="noopener">Το «Black Mirror» επιστρέφει πιο σκοτεινό και αναπάντεχο από ποτέ - Το τρέιλερ</a></li><li><a href="https://www.businessnews.gr/oikonomia/item/262760-goldman-sachs-agorazei-ethniki-peiraios-kai-alpha-oudeteri-gia-eurobank" target="_blank" rel="noopener">Goldman Sachs - Αγοράζει Εθνική, Πειραιώς και Alpha - Ουδέτερη για Eurobank</a><ul><li><a href="https://www.businessnews.gr/epixeiriseis/trapezes/item/262759-papagaryfallou-alpha-bank-anthektikes-sta-eksogeni-sok-oi-ellinikes-trapezes" target="_blank" rel="noopener">Alpha Bank - Ανθεκτικές στα εξωγενή σοκ οι ελληνικές τράπεζες</a></li></ul></li><li><a href="https://www.businessnews.gr/politiki/item/262765-ekloges-2023-katatethikan-50-aitiseis-symmetoxis-apo-kommata-kai-synaspismoys-ston-areio-pago" target="_blank" rel="noopener">Εκλογές 2023 - Κατατέθηκαν 50 αιτήσεις συμμετοχής από κομμάτα και συνασπισμούς στον Άρειο Πάγο</a></li><li><a href="https://www.kathimerini.gr/world/562391386/kina-oi-neoi-proseychontai-gia-na-vroyn-doyleia-oyres-stoys-naoys/" target="_blank" rel="noopener">Κίνα - Οι νέοι προσεύχονται για να βρουν δουλειά καθώς ανακάμπτει πανδημία του κορωνοϊού</a>
</li></ul><h2 id="_26042023"><a href="#/stories/greece?id=_26042023" data-id="_26042023" class="anchor"></article></section>
 
C

Costas

Administrator
Staff member
implement the same on docsify

at index.hml
JavaScript: 
    <script>
        window.$docsify = {
            executeScript: true,  // https://docsify.js.org/#/configuration?id=executescript
            .
            .
            .
    }
    </script>
.
.  
.
    <script>
        function SearchList(e){  
          if (e.key === "Enter") {
            e.preventDefault();
           
            const nodes = Array.from(document.querySelectorAll("article > ul > li"));
            nodes.forEach((i) => i.classList.remove("hiME"));
            nodes.filter((i) => !i.textContent.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "").includes(e.target.value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "")) ).forEach((i) => i.classList.add("hiME"));
          }
        }
   
    </script>

    <style>
        .hiME { display:none!important; }
        .ceME { margin: auto; display: block; }
    </style>

on test.md
JavaScript: 
<input id="txtSearch" onkeypress="SearchList(event);"
class="ceME" placeholder="press enter to search">

ref :
https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp
https://www.w3schools.com/jsref/event_onkeypress.asp
CSS Horizontal & Vertical Align
Searchable Navigation Tree For Bootstrap 5 – bs5-nav-tree
JS - Remove Greek diacritics >> sample
 
You must log in or register to reply here.
Top