如何使用向上和向下箭头键从数据库中进行自动完成搜索

我有从数据库中进行自动完成搜索的代码。在这里，当我正在输入相关名称从数据库中显示的字母时，就像Google一样正在进行搜索。如何使用向上和向下箭头键从数据库中进行自动完成搜索

问题出在这个搜索结果中，我无法使用箭头键进行选择。请帮助我为此添加任何代码。

谢谢！

<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $(".search").keyup(function() 
    { 
     var searchid = $(this).val(); 
     var dataString = 'search='+ searchid; 

     if(searchid!='') 
     { 
      $.ajax({ 
      type: "POST", 
      url: "search.php", 
      data: dataString, 
      cache: false, 
      success: function(html) 
      { 
       $("#result").html(html).show(); 
      } 
     }); 
    }return false;  
}); 

jQuery("#result").live("click",function(e){ 
    var $clicked = $(e.target); 
    var $name = $clicked.find('.name').html(); 
    var decoded = $("<div/>").html($name).text(); 
    $('#searchid').val(decoded); 
}); 

jQuery(document).live("click", function(e) { 
    var $clicked = $(e.target); 
    if (! $clicked.hasClass("search")){ 
     jQuery("#result").fadeOut(); 
    } 
}); 

$('#searchid').click(function(){ 
    jQuery("#result").fadeIn(); 
}); 
}); 

</script> 
<script type="text/javascript"> 
function hint(string) 
{ 
if(string.length==0) 
{ 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
} 
if(window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
} 
else 
{// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange=function() 
{ 
    if(xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
} 
xmlhttp.open("GET","get.php?searchid="+string,true); 
xmlhttp.send(); 
} 
</script> 
<style type="text/css"> 
body{ 
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:18px; 
} 
.content{ 
    width:900px; 
    margin:0 auto; 
    padding:0px; 
} 
#searchid 
{ 
    width:500px; 
    border:solid 1px #000; 
    padding:10px; 
    font-size:14px; 
} 
#result 
{ 
    position:relative; 
    width:500px; 
    padding:10px; 
    display:none; 
    margin-top:-1px; 
    border-top:0px; 
    overflow:hidden; 
    border:1px #CCC solid; 
    background-color: white; 
} 
.show 
{ 
    padding:10px; 

    font-size:15px; 
    height:10px; 
} 
.show:hover 
{ 
    background:#4c66a4; 
    color:#FFF; 
    cursor:pointer; 
} 
</style> 
</head> 

<body> 
<form method="GET" onkeyup="hint(this.value)"> 
<div class="content"> 
<p><font face="cambria" color="green" size="6"><b>Search Staff byName</b> 
<input type="text"class="search" onkeyup="hint(this.value)id="searchid"> 
<div id="result" align="center"> 
</div> 
</div>

来源

2015-09-04 K SuryaPrakash

在这里，您可以使用向上和向下箭头为自动完成，试试这个，让您的答案。

$(document).on('keyup keydown', '.search', function(){ 
var searchid = $(this).val(); 
var dataString = 'search='+ searchid; 
if(searchid!='') 
{ 
$.ajax({ 
type: "POST", 
url: "search.php", 
data: dataString, 
cache: false, 
success: function(html) 
{ 
$("#result").html(html).show(); 
} 
}); 
}return false;  
});

来源

2015-09-04 06:28:40 Pradeep

如何使用向上和向下箭头键从数据库中进行自动完成搜索

回答

相关问题