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

webdevyusuf
1477 gün önce

Bunu javascript ile mi jquery ile mi yapacaksın