箭头和输入键在 datalist 上无法正常工作如何修复答案

【问题标题】：Arrows and enter key is not properly working on datalist how to fix箭头和输入键在 datalist 上无法正常工作如何修复
【发布时间】：2020-08-24 16:40:41
【问题描述】：

我想在不使用鼠标的情况下进行搜索和选择项目。但输入键和上下箭头无法正常工作。请帮帮我。

我的代码

index.php

<head>
<script type="text/javascript">
        $(document).ready(function(){
            $('.search-box input[type="text"]').on("keyup input", function(){
                /* Get input data on change */
                var inputVal = $(this).val();
                var resultDropdown = $(this).siblings(".result");
                if(inputVal.length){
                    $.get("backend-search.php", {term: inputVal}).done(function(data){
                        // Display the response of medicines 
                        resultDropdown.html(data);
                    });
                } else{
                    resultDropdown.empty();
                }
            });
            
        });

        </script>
</head>
<input id='med_id' class='form-control' type="text" autocomplete="off"  onfocus="this.value=''" value="Search Items..." required="" autofocus=""  onfocus="this.select()"  list="brow" />
          
<datalist id="brow" class="result"> </datalist>

数据列表的数据正在从下面的代码中收集

后端搜索.php

require("../db.php");
if($db === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
 
if(isset($_REQUEST["term"])){
    $sql = "SELECT * FROM medi_items WHERE M_Item_name LIKE ?";   
    if($stmt = mysqli_prepare($db, $sql)){
        mysqli_stmt_bind_param($stmt, "s", $param_term);       
        $param_term = $_REQUEST["term"] . '%';       
        if(mysqli_stmt_execute($stmt)){
            $result = mysqli_stmt_get_result($stmt);           
            if(mysqli_num_rows($result) > 0){
                while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
                     echo "<option>" . $row["M_Item_name"] . "</option>";
                }
            } else{
                echo "<p>No matches found</p>";
            }
        } else{
            echo "ERROR: Could not able to execute $sql. " . mysqli_error($db);
        }
    }
    mysqli_stmt_close($stmt);
}
mysqli_close($db);

当我使用鼠标单击时，此代码工作正常，但我需要准备一个没有鼠标的工作，只使用键盘'Enter 和向上和向下箭头键'我是 php 和 ajax 新手，请帮助我

【问题讨论】：

“无法正常工作”究竟是什么意思？请更具体。
按向下箭头键会将您移至第一个选项。但就是这样。进入时不会选择。但是鼠标点击效果很好。

标签： php ajax

【解决方案1】：

稍作改动后，我能够解决问题。谢谢你。 *** keyup 到 Keypress ***

            $('.search-box input[type="text"]').on("keypress input", function(){
                /* Get input data on change */
                var inputVal = $(this).val();
                var resultDropdown = $(this).siblings(".result");
                if(inputVal.length){
                    $.get("backend-search.php", {term: inputVal}).done(function(data){
                        // Display the response of medicines 
                        resultDropdown.html(data);
                    });
                } else{
                    resultDropdown.empty();
                }
            }); ```

【讨论】：