<button>Arama Butonu</button>

/* gerek yok */

Zaten bu işi senin yerine yapan bir araç var. Adı Algolia bir bak derim.

bunun için önce veri lazım, veriler için bir veritabanı lazım, veritabanındakileri listeleyebilmek için bir yazılım dili lazım, kısaca php ve mysql öğrenerek başlayabilirsin nasıl olacağını anlamaya.

ben zaten datayı nasıl bulduğu ve arama sonuçlarının nasıl yapıldığını sordum bunun için javascript mi gerekli

Yani bu çok genel bir soru, tasarımın nasılsa ona göre yaparsın. En basit haliyle istersen;

<form action="" method="get" class="search">
    <input type="text" placeholder="Arama yap">
    <button type="submit">Ara</button>
</form>

<style>
    form.search {
        display: flex;
    }
    form.search input {
        height: 40px;
        border: 1px solid #ddd;
        border-radius: 4px 0 0 4px;
        font-size: 16px;
        font-weight: 500;
        box-sizing: border-box;
		padding: 0 15px;
		flex: 1;
		outline: 0;
    }
    form.search button {
        height: 40px;
        padding: 0 30px;
        background: #393a3b;
        color: #fff;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        border: none;
    }
</style>

tabi html/css ile sadece görüntüsünü yaparsın, işlevsellik için bir yazılım dili şart.