添加对AJAX Live Search PHP的keydown(键盘箭头向上/向下)支持 [英] Add keydown (keyboard arrow up/down) support for AJAX Live Search PHP
问题描述
谢谢您的关注，
我正在使用 W3 PHP AJAX实时搜索示例，并且它已经集成在此站点上.这几乎是完美的.我希望使用键盘上的箭头(向上(或向左)和向下(或向右))将结果集中在< div id ="livesearch"> 内.然后，在焦点上按Enter⏎键即可加载.
I'm using the W3 PHP AJAX Live Search Example and it's already integrated on this site. It's just about perfect. I wish to use arrows on keyboard, up (or left) and down (or right), to focus results inside of <div id="livesearch">. Than, on focus press Enter ⏎ key to load.
推荐答案
在HTML头中:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
#livesearch {
min-height: 155px;
}
#livesearch a:hover {
text-decoration: none;
background-color: rgba(0,0,0,0.05);
}
#livesearch a {
text-transform: capitalize;
font-size: inherit;
padding: 5px 13px;
display: block;
}
#livesearch .selected {
text-decoration: none;
background-color: rgba(0,0,0,0.05);
}
</style>
</head>
HTML表单:
<body>
<form method="post" id="myfrm">
<input type="text" name="search" class="form-control search" placeholder="Just start typing..." autofocus="">
</form>
<div id="livesearch"><div>
</body>
AJAX函数:
<script>
function showResult(str) {
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
Jquery:
<script>
$(document).ready(function ($) {
$('.search').keyup(function (e) {
var key = e.keyCode;
if (key == 40 || key == 38 || key == 13) {
return false;
}
var str = $('.search').val();
showResult(str);
});
$('#myfrm').on("keydown", ".search", function (e) {
var $listItems = $('#livesearch a');
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
if (key != 40 && key != 38 && key != 13)
return;
//$listItems.removeClass('selected');
if (key == 40) // Down key
{
$listItems.removeClass('selected');
if (!$selected.length || $selected.is(':last-child')) {
$current = $listItems.eq(0);
} else {
$current = $selected.next();
}
console.log("Current : "+$current);
}
else if (key == 38) // Up key
{
$listItems.removeClass('selected');
if (!$selected.length || $selected.is(':first-child')) {
$current = $listItems.last();
} else {
$current = $selected.prev();
}
}
else if (key == 13) // Enter key
{
$current = $listItems.filter('.selected');
$current.trigger('click');
return false;
}
$current.addClass('selected');
});
});
</script>
从 livesearch 数据中的 input 搜索框中检索数据:
Retrieve data in input search box from livesearch data :
<script>
$(document).ready(function ($) {
$("body").on("click", "#livesearch a", function(e){
e.preventDefault();
var data = $(this).text();
$(".search").val(data);
$('#livesearch').html('');
});
});
</script>
如果要使用ajax + jquery代替ajax showResult(str)来获取数据 livesearch.php ，则可以使用以下代码:
If you want used instead of ajax showResult(str) using ajax+jquery for data retrieve livesearch.php so, you can used bellow code :
<script>
$(document).ready(function ($) {
$('.search').keyup(function (e) {
var key = e.keyCode;
if (key == 40 || key == 38 || key == 13) {
return false;
}
var str = $('.search').val();
$.ajax({
context: this,
url: 'livesearch.php',
type: 'get',
dataType: 'html',
data: {
q: str,
},
beforeSend: function () {
console.log("Loadding...");
}
}).done(function (response) {
$("#livesearch").html(response);
});
});
});
</script>
这篇关于添加对AJAX Live Search PHP的keydown(键盘箭头向上/向下)支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
