Google Haberler gibi bir arama kutusu nasıl yapılır

Question

Google Haberler’e benzer bir arama kutusu kullanmaya çalışıyorum. Temel olarak bir arama terimi yazdığınızda, haberlerde veya tüm web'de arama yapabilmeniz için açılır menüde iki seçenek vardır.

Böyle 2'yi Seç gibi birçok seçkin eklentileri olduğunu biliyorum, ama gerçekten onlar Seçenekleri belirlemek için tasarlanmıştır çünkü doğru çözüm olduğunu sanmıyorum.

Eğer birisi bir ışık tutabilir ve hacky bir şey koymadan önce beni doğru yöne yönlendirirse gerçekten çok memnun olurum. Teşekkürler!

Answer 1

Buradaki küçük bir sorgulama işinde gerekli hiçbir eklenti kod değildir.

Sadece bir metin kutusu ve giriş satırında görünecek olan iki satırlı bir div oluşturun ve sonra metin kutusundaki metin değişikliği ile bu li'nin metnini değiştirin ve sonuç şu şekildedir: http://codepen.io/yudircks/pen/Raxabd. İşte

altında kullanılan koddur

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 
<div class="search_cont"> 
    <input type="text"> 
    <div class="result_optins"> 
    <ul> 
     <li><span></span>-Search news</li> 
     <li><span></span>-Search the web</li> 
    </ul> 
    </div> 
</div> 

CSS

*{ 
    box-sizing:border-box; 
} 
body{ 
    font-family:arial; 
} 
.search_cont input{ 
    width:300px; 
    height:30px; 
    padding:10px; 
} 
.search_cont .result_optins{ 
    width:300px; 
    display:none; 
} 
.search_cont .result_optins ul{ 
    padding:0; 
    margin:0; 
} 
.search_cont .result_optins ul li{ 
    list-style:none; 
    padding:5px; 
    border:1px solid #999; 
    color:#aaa; 
} 
.search_cont .result_optins ul li span{ 
    color:#777 
} 

JQUERY