Youtubebun arama çubuğunu nasıl yaparım (Çözüldü cevabı sorunun içinde)

omerfarukbicer 1477 gün önce

754 defa görüntülendi ve 1 kişi tarafından değerlendirildi

ben youtubeda olduğu gibi arama çubuğu kısmındaki sonuçları yazdığınız kelimeye göre getiren bir kod yazdım hiç bir sorun yok ben istiyorumki aşşağı tuşuna basınca o hover olsun yani onun üstüne gelsin ve enter basıncada o linke gidebilsin nasıl yapabilirim acaba lütfen yardım edin arkdaşlar sorunumu webdevyusuf sayesinde çözdüm ama o sadece aşşağı ve yukarı oklar ile oluyordu bende ajax ile çekilen ve aşşağı ve yukarı bide entere basınca sonuca gitmesini sağladım bana yardımcı olan webdevyusufa teşekkür ediyorum yapılan kod aşşağıdaki gibidir html kısmında ise forma bu
nitelikliği eklmeyi unutmayın o da onsubmit='return false;'

$(function(){
    $('#sonuc').hide();
    $( "#q" ).keyup(function(tus) {
      if (tus.keyCode == 38 || tus.keyCode == 40 || tus.keyCode == 13) {
      }else {
        var value = $("#q").val();
        if (value == '') {
          $('#sonuc').hide();
          $( "#q" ).removeClass('searchBoxList');
        }else if (value == ' ') {
          $('#sonuc').hide();
          $( "#q" ).removeClass('searchBoxList');
        }else {
          $( "#q" ).addClass('searchBoxList');
          $.ajax({
            type:'post',
            url:'ajax.php',
            data:'value='+value,
            success: function(sonuc) {
                if (!sonuc) {
                  $("#q").removeClass('searchBoxList');
                  $('#sonuc').hide();
                }else {
                  $('#sonuc').show().html(sonuc);
                }
            }
          });
        }
      }
    });
  });
  $(window).keyup(function(e){

    if ( e.keyCode == 38 ){
       let classAdd = $('#sonuc .search_a.active').index() - 1;
       if( classAdd < 0 ){ return false; }
       $('#sonuc .search_a.active').removeClass("active");
       $('#sonuc .search_a:eq(' + classAdd + ')').addClass("active");
       $('#q').val($('#sonuc .search_a:eq(' + classAdd + ') .search_cibza #container #contents #term').text());
    }else if( e.keyCode == 40 ){
      let classAdd = $('#sonuc .search_a.active').index() + 1;
      if( $('#sonuc .search_a').length == classAdd ){ return false; }
      $('#sonuc .search_a.active').removeClass("active");
      $('#sonuc .search_a:eq(' + classAdd + ')').addClass("active");
      $('#q').val($('#sonuc .search_a:eq(' + classAdd + ') .search_cibza #container #contents #term').text());
    }
    if (e.keyCode == 13) {
      let location = $('#sonuc .search_a.active').attr("data-href");
      $(window).attr('location', location);
    }
  });

eğer nasıl olduğunu denemek istiyorsanız Buradan ana sayfada bulunan arama çubuğunda deneye bilirsiniz

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (6)

webdevyusuf

1476 gün önce

Şöyle küçük bir örnek hazırladım çok vaktim olmadığı için bununla yola çıkarak düzenleyebilirsin siteni

Bu HTML'i

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<h1>Todo List</h1>
<ul>
  <li class="active">Todo 1</li>
  <li>Todo 2</li>
  <li>Todo 3</li>
  <li>Todo 4</li>
  <li>Todo 5</li>
  <li>Todo 6</li>
</ul>
<script src="script.js"></script>

Buda SCSS'i

$font: arial;

h1 {
  font-family: $font;
}
ul {
  li {
    font-family: $font;
    padding: 4px;
    &.active {
      text-decoration: underline;
    }
  }
}

Buda Javascript'i

$(window).keyup(function(e){
  if ( e.keyCode == 38 ){
     let classVerilecek = $('ul li.active').index() - 1;
     if( classVerilecek < 0 ){ return false; }
     $('ul li.active').removeClass("active");    
     $('ul li:eq(' + classVerilecek + ')').addClass("active");
  }else if( e.keyCode == 40 ){
    let classVerilecek = $('ul li.active').index() + 1;
    if( $('ul li').length == classVerilecek ){ return false; }
    $('ul li.active').removeClass("active");    
    $('ul li:eq(' + classVerilecek + ')').addClass("active");
  }
});

Eğer uygulamayı deneyeceksen SCSS yerine bu CSS'i kullan

h1 {
  font-family: arial;
}
ul li {
    font-family: arial;
    padding: 4px;
}
ul li.active {
    text-decoration: underline;
}

İyi çalışmalar...

#002352

omerfarukbicer

1476 gün önce

cevabı silemedim böyle yaptım

#002360

omerfarukbicer

1476 gün önce

hocam örnek işe yaradı çok teşekkürler tek kalan ise dediğim gibi entere tıklayın ca üstünde olan linke gitmesi ve formun submitini iptal etme çünkü entere basınca form kendiliğinden gidiyor hocam onu ben nasıl yapacağımı biliyorum ama önemli olan entere basınca üstündeki a etiketinin linkine gitmesi dir cevabınız için teşekkürler, bu da çözülmüştür

#002359

omerfarukbicer

1476 gün önce

hocam çok teşekkürler tam istediğim örnekte ben mesela entere basınca ordaki linke gitmesinide istiyorum bunu nasıl yapabilirm javascript bilgim pek fazla iyi değil

#002357

omerfarukbicer

1477 gün önce

jquery ile canlı sonuç listelemeyi yaptım ama ben aşağı ok tuşuna basınca üstüne gelmiyor nasıl yapabilirim

#002338

webdevyusuf

1477 gün önce

Bunu javascript ile mi jquery ile mi yapacaksın

#002337