Question

我正在构建一个AJAX实时搜索，但是我可以使用键盘箭头（向上/向下）进行导航。我不知道怎么做到这一点。

我的form.php

<div class="input-group" id="nav-input-group" style="display:table;">
    <input name="q" id="thesearchbar" class="form-control input-search " name="search" placeholder="Serach..." autocomplete="off" type="text" onclick="">
    <div class="result"></div>
</div>

我的剧本

$(document).ready(function(){
    $('#nav-input-group input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("_ajax_search.php", {term: inputVal}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });
    // Set search input value on click of result item
    $(document).on("click", ".result p", function(){
        $(this).parents("#nav-input-group").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});

和_ajax_search.php

<?php
require('bdd_pdo_connect.php');
try{
    if(isset($_REQUEST['term'])){
        $sql = "SELECT * FROM subcategories WHERE subcategory LIKE :term";
        $stmt = $bdd->prepare($sql);
        $term = '%' . $_REQUEST['term'] . '%';
        $stmt->bindParam(':term', $term);
        $stmt->execute();
        if($stmt->rowCount() > 0){
            while($row = $stmt->fetch()){
                echo "<p>" . $row['subcategory'] . "</p>";
            }
        } else{
            echo "<p>No matches found";
        }
    }  
} catch(PDOException $e){
    die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}
unset($bdd);
?>

我是AJAX的新手，非常感谢任何帮助。

Answer 1

为什么不使用HTML select标记制作下拉列表？它默认支持箭头键导航。如果您希望显示所有选项，请使用HTML size标记的select属性（请参阅HTML5 size attribute specification）。

<强> HTML

<div class="input-group" id="nav-input-group" style="display:table;">
    <input name="q" id="thesearchbar" class="form-control input-search " name="search" placeholder="Serach..." autocomplete="off" type="text" onclick="">
    <select class="result" size="10"></div> <!-- size="10" is an example here -->
</div>

<强> JS

// (ajax part)
// ...

$(document).on("change", ".result", function(){
    $(this).parents("#nav-input-group").find('input[type="text"]').val($(this).val());
    $(this).empty();
});

将箭头导航添加到Ajax实时搜索

1 个答案: