xiaocms ajax,添加的keydown（键盘上的箭头上/下）对于AJAX Live搜索PHP

在HTML头：

#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);

}

HTML表单：

AJAX功能：

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();

}

的Jquery： 使用AJAX + jQuery的

$(document).ready(function ($) {

$("body").on("click", "#livesearch a", function(e){

e.preventDefault();

var data = $(this).text();

$(".search").val(data);

$('#livesearch').html('');

});

});

如果你想使用的，而不是AJAX showResult(str)数据检索livesearch.php的话，你可以用波纹管代码：

$(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');

});

});

从livesearch数据检索input搜索框中数据

$(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);

});

});

});