v2.5.2
Giriş yap

Arama Kutusu -> Sonuç Listesi

aydinkeskin
503 defa görüntülendi
6

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.

css
Cevap yaz
Cevaplar (6)
aydinkeskin
1272 gün önce

:D

az önce kendim uğraşa uğraşa yaptım :)


<style> 
    .search-element input{
        padding: 10px 10px 10px 5px;
    } 
    .search-box ul{
        position: absolute;		
        display:block;
        z-index: 9;
        -webkit-transform-style:preserve-3d;
        min-width:205px;
        left:auto!important;
        box-shadow:0 0 3.76px 0.24px rgba(0,0,0,.15);
        top:54px;
    }
    .search-box h4{
        color: #fff;
    } 
    /* Formatting result items */
    .liveresult li{
        cursor: pointer; 
    }
    .liveresult li:hover{
        background: #f2f2f2;
    }  
    .list-group-item{
        width: 890px !important;
    }
</style>

bu şekilde sorunsuz bir şekilde istediğime ulaştım

ilgiliniz için teşekkürler.belki birine lazım olur

0
#002559
qplot
1272 gün önce

kendın cozuceksın zaten :) başarılarının devamını dılerız

1
#002560
qplot
1272 gün önce

tamm mantık bu zındex vereceksınkı hepsının ustune cıksın sonrasında kayan yerlerı ayarlayacaksn baska yolu yok :)
sıhırlı degnek yok bıraz emek lazım :)

0
#002557
aydinkeskin
1272 gün önce

@qplot

işe yaradı seninki bu sefer sonuçlar hepsi iç içe geçti al alta listelenmedi teşekkür ederim zaman ayırdığın için.

@webdevyusuf kardeşim onu denedimde ondan da sonuç aynı benim sorunum tamamen css ile alakalı. ilgin için teşekkürler.

0
#002555
qplot
1272 gün önce
	<style>
	
		.aramaseysi{
			
			position: absolute;
			z-index: 99999999;
		}
	
	</style>
1
#002545
webdevyusuf
1272 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...

1
#002533