Youtubebun arama çubuğunu nasıl yaparım (Çözüldü cevabı sorunun içinde)
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
Şö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...