php - jQuery PHP 使用向上和向下箭头键选择搜索结果

Question

我正在构建一个 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>

阿贾克斯搜索：

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

非常感谢任何帮助.. 使用箭头键时实际上什么都没有发生。

标签： phpjqueryajaxsearch