v2.5.2
Giriş yap

Arama Kutusu -> Sonuç Listesi

aydinkeskin
552 defa görüntülendi

Resimler ile kendimi daha iyi ifade ederim sanıyorum.

bu resim da arama alanının boş hali
https://hizliresim.com/6rcU0g

bu resim de ise ajax ile aranan sonuçlar

https://hizliresim.com/1GzgBk

kullandığım parçalar

<div class="col-md-9 align-self-center">
    <div class="header-right-element d-flex">
        <div class="search-element media-body search-box">
           
			<input type="text" placeholder="Kategorilerde Ara..." /> 
			<ul class="list-group liveresult"></ul>
			<style> 
				.search-element input{
					padding: 10px 10px 10px 5px;
				} 
				.search-box h4{
					color: #fff;
				} 
				/* Formatting result items */
				.liveresult li{
					cursor: pointer;
				}
				.liveresult li:hover{
					background: #f2f2f2;
				}
				</style> 
        </div> 
        <div class="contact-link">
            <div class="phone">
                <p>Telefon:</p>
                <a href="tel:<?php echo TELEFON ?>"><?php echo TELEFON ?></a>
            </div>
        </div>  
    </div>
    <!--Cart info End -->
</div>

diğer divlerin üstüne gelmesini istiyorum fakat yapamıyorum
nasıl yapabilirim acaa

yardımlarınız için teşkler.

webdevyusuf
1463 gün önce

Öncelikle merhaba bunlar genellikle jquery ile yapılıyor jquery autocomlete paketiyle eğer sayfanda jquery yoksa https://www.w3schools.com/howto/howto_js_autocomplete.asp bu sayfada bir örnek var.

İyi çalışmalar...