我有一个非常基本的自动建议功能,我的网站每当用户在我的搜索输入中输入内容时都会运行。自动建议下拉不选择使用箭头向上/向下键
它应该像谷歌搜索自动建议一样的功能 - 它有点类似。但是,当返回一些建议时,如果用户点击其键盘上的某个箭头,则不会选择任何建议。
这里是我的JS(对于建议的选择):
$(document).ready(function(){
var $result = $('li');
$('input').keydown(function(e){
var key = e.keyCode, $selected = $result.filter('.selected'), $current;
if(key != 40 && key != 38){
return;
}
$result.removeClass('selected');
if (key == 40){
if (!$selected.length || $selected.is(':last-child')){
$current = $result.eq(0);
} else {
$current = $selected.next();
}
} else if (key == 38){
if (!$selected.length || $selected.is(':first-child')){
$current = $result.last();
} else {
$current = $selected.prev();
}
}
$current.addClass('selected');
});
});
这里是我的Ajax:
function findmatch(){
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById('s-dif').innerHTML = xmlhttp.responseText;
}
}
var qVal = document.getElementById('query-value');
xmlhttp.open('GET', 'search/suggest.php?q=' + qVal.value, true);
xmlhttp.send();
}
非常基本的HTML:
<div class="form-container">
<form method="get" id="search" name="search">
<input type="text" name="q" id="query-value" onkeyup="findmatch();" placeholder="Search with Ajax...">
</form>
</div>
<div class="suggestions">
<ul id="s-dif">
</ul>
</div>
,最后,我的PHP:
if(isset($_GET['q'])){
$results = '';
$query = trim($_GET['q']);
if(!empty($query)){
$stmt = $conn->prepare("SELECT title, popularity FROM autosuggest WHERE keywords LIKE :query OR title LIKE :query ORDER BY popularity desc LIMIT 7");
$query = $query . '%';
$stmt->bindParam(':query', $query);
$stmt->execute();
$count = $stmt->rowCount();
$i = 0;
if($count > 0){
while($row = $stmt->fetch(PDO::FETCH_OBJ)){
$title = $row->title;
$popularity = $row->popularity;
$i++;
$results .= '<li id="select-suggest" value="' . $i . '" name="' . $title . '">' . $title . '</li>';
}
}
}
}
print("$results");
我觉得好像问题在于我“的选择jQuery的”内,但是,我已经确定要三重检查一切,但我似乎无法找到任何会阻止该功能工作的东西。
我要笑,你是当你已经在使用jQuery使用自己的AJAX。 – PHPglue
@PHPglue这是我第一次使用Ajax ..我使用从我发现的网站的修改版本,因为我还在学习... –
为什么不使用自动完成的texbox? –