Let's make Search Box with HTML

Extazİ

Asistan Moderatör
20 Haz 2021
2,438
1,433
https://tr.wikipedia.org/wiki/Ekstazi
kkf1ow4.png
Hi TurkHackTeam we will do search box with HTML about it.
HTML:
<html>
    <head>
        <title>TURK HACK TEAM ~ K3D</title>

        <!-- Meta -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

        <!-- Link -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

        <!-- Script -->
        <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    </head>
    <body>
        <!-- Başlayalım Yavaştan -->

        <!-- Stil Tagımız -->
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200&display=swap');

            body{
                background-color: #fff;
                color: #000;
                margin: 0;
                font-family: 'Work Sans', sans-serif;
            }

            .menu{
                padding: 10px;
            }
            .menu > .flex{
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
            .menu > .flex > div > a{
                color: #000;
                text-decoration: none;
                font-weight: bold;
                margin-left: 5px;
                margin-right: 5px;
                font-size: 18px;
                background-image: linear-gradient(90deg, #000 100%, #000 0%);
                background-repeat: no-repeat;
                background-position: bottom center;
                background-size: 0% 2px;
                transition: 250ms all
            }
            .menu > .flex > div > a:hover{
                background-size: 100% 2px;
            }
            .menu > .flex > div > input{
                border: none;
                margin-left: 50px;
                width: 100px;
                outline: none;
                background-image: linear-gradient(90deg, #000 100%, #000 0%);
                background-repeat: no-repeat;
                background-position: bottom center;
                background-size: 0% 1px;
                transition: 250ms all
            }
            .menu > .flex > div > input:focus{
                background-size: 100% 1px;
            }
            .menu > .flex > div > i{
                position: relative;
                top: 0px;
                left: -130px;
            }

            .mesajlar{
                padding: 10px;
                width: 500px;
                display: block;
                margin: 0 auto;
              
            }
            .mesajlar > .box{
                display: flex;
                flex-direction: column;
            }
            .mesajlar > .box > div{
                background-color: #fff;
                box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, .2);
                padding: 10px;
                border-radius: 10px;
                margin-bottom: 20px;
            }
        </style>


        <!-- Menu Divlerimiz -->
        <div class="menu">
            <div class="flex">
                <div>
                    <h1>TURK HACK TEAM</h1>
                </div>
                <div>
                    <a href="https://turkhackteam.org">THT</a>
                    <a href="#">K3D</a>
                    <input type="text" autocomplete="off" name="ara" id="ara" placeholder="Ara...."/>
                    <i class="bi bi-search"></i>
                </div>
            </div>
        </div>

        <!-- Mesajlarımız -->
        <div class="mesajlar">
            <div class="box">
                <div>
                    <h1>' Coderx37</h1>
                    <p>"Test mesajı olarak ilk ben atayım."</p>
                </div>
                <div>
                    <h1>Adanlıtrojan</h1>
                    <p>Merhaba Gardaş</p>
                </div>
                <div>
                    <h1>K3D</h1>
                    <p>Test</p>
                </div>
                <div>
                    <h1>KaptanTR</h1>
                    <p>AR-GE TURK HACK TEAM</p>
                </div>
                <div>
                    <h1>' Adige</h1>
                    <p>Merhaba.</p>
                </div>
            </div>
        </div>
      

        <!-- Siciriptlerimiz -->
        <script>
            // Büyük ve Küçük harf kontrolü
            jQuery.expr[':'].contains = function(a, i, m){
                return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
            };

            $(document).ready(function(){
                $('#ara').keyup(function() {
                    var kelime = $("#ara").val();

                    // Boş bir değer girerse, hiç bir şey aramasın
                    if(kelime.length == 0){
                        $(".box div").show();
                    } else{
                        // Eğer geçerli bir arama yapılırsa
                        $('.box div').hide();
                        $('.box div:contains('+kelime+')').show();
                    }
                })
            })
        </script>
    </body>
</html>
Output:
98ira7j.png

Subject Owner: @K3D
the original topic: https://www.turkhackteam.org/konular/html-ile-arama-kutusu-yapalim.2017444/#post-9608172


3n2pojj.png


f6rz8da.jpg
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.