Я строю поиск ajax и хотел бы иметь возможность прокручивать результаты вверх и вниз. Часть поиска и результатов ajax работает отлично, однако я не могу выделить результаты поиска при использовании клавиш со стрелками ...
Вот мой код:
HTML с результатами выборки:
<div class="searchbox-container">
<form id="homeSearch">
<div class="searchbox-box">
<input type="text" id="search_term" placeholder="Address, School, City, Zip or Keyword..">
</div>
<div class="searchbox-btn">
<button class="btn btn-search"><i class="fas fa-search" aria-hidden="true"></i></button>
</div>
</form>
<div id="searchbox-results" class="searchbox-results" style="">
<div class="ul-head"><i class="fas fa-home" aria-hidden="true"></i> Properties</div>
<ul>
<li id="result"><a href="listing/1402+Burnett+Lane+Vincennes+IN/201845998"><b>1402</b> Burnett Lane, Vincennes, IN, 47591</a></li>
<li id="result"><a href="listing/1402+N+Dewey+Street+Auburn+IN/201911897"><b>1402</b> N Dewey Street, Auburn, IN, 46706</a></li>
<li id="result"><a href="listing/1402+Sugar+Water+Court+Russiaville+IN/201913291"><b>1402</b> Sugar Water Court, Russiaville, IN, 46979</a></li>
<li id="result"><a href="listing/14023+Aloes+Passage+Fort+Wayne+IN/201916086"><b>1402</b>3 Aloes Passage, Fort Wayne, IN, 46845</a></li>
<li id="result"><a href="listing/1402+Main+Street+Frankfort+IN/201919194"><b>1402</b> Main Street, Frankfort, IN, 46041</a></li>
</ul>
</div>
</div>
Ajax Поиск:
$(document).ready(function() {
$('#search_term').keyup(function() {
var search_term = $('#search_term').val();
if (search_term == "") {
$('.searchbox-results').html("");
$('.searchbox-results').hide();
} else {
if (!search_term.replace(/\s/g, '').length) {
return false;
} else {
$.ajax({
type: "POST",
url: "ajax_search.php",
data: {
search_term: search_term
},
success: function(html) {
$('#searchbox-results').removeClass('hidden');
fill(html);
$('.searchbox-results').html(html).show();
}
})
}
}
});
});
Выбор поиска
$(document).ready(function() {
var result = $('li');
var resultSelected;
$('#search_term').on('keydown', function(e) {
if(e.which === 40) {
if (resultSelected) {
resultSelected.removeClass('selected');
next = resultSelected.next();
if (next.length > 0) {
resultSelected = next.addClass('selected');
} else {
resultSelected = result.eq(0).addClass('selected');
}
}
}
if(e.which === 38) {
}
});
});
PHP, который возвращает результат (чтобы увидеть неупорядоченную структуру списка)
// Properties
if ($addr_num != 0) {
echo '<div class="ul-head"><i class="fas fa-home"></i> Properties</div>';
echo '<ul>';
while ($addr_result = mysqli_fetch_array($addr_res)) {
// Variables for URL
$url_addr = str_replace(" ", "+", ucwords(strtolower($addr_result['L_Address'])))."+";
$url_addr .= str_replace(" ", "+", ucwords(strtolower($addr_result['L_City'])))."+";
$url_addr .= $addr_result['L_State'];
// Bold Matched Text
$word = $search_term;
$pattern = "/$word/i";
$replace = "<b>$word</b>";
$replace_addr = ucwords(strtolower($addr_result['L_Address'])).", ".$addr_result['L_City'].", ".$addr_result['L_State'].", ".$addr_result['L_Zip'];
$result_match = preg_replace($pattern, $replace, $replace_addr);
echo '<li id="result"><a href="listing/'.$url_addr.'/'.$addr_result['L_ListingID'].'">'.$result_match.'</a></li>';
}
echo '</ul>';
}
Любая помощь очень ценится .. буквально ничего не происходит при использовании клавиш со стрелками.