v2.5.2
Giriş yap

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

omerfarukbicer
755 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

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