Блог

Главная - Вопросы по программированию - Стрелки и клавиша ввода неправильно работают в datalist, как исправить

Стрелки и клавиша ввода неправильно работают в datalist, как исправить

#php #ajax

#php #ajax

Вопрос:

Я хочу сделать это для поиска и выбора элементов без использования мыши. но клавиша ввода и стрелки вверх и вниз не работают должным образом. пожалуйста, помогите мне.

Мои коды

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>

данные для datalist собираются из приведенного ниже кода

backend-search.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);

когда я щелкаю мышью, эти коды работают правильно, но мне нужно подготовиться к работе без мыши, используя только клавиатуру «Ввод и клавиши со стрелками вверх и вниз», я новичок в php и ajax, пожалуйста, помогите мне

Комментарии:

1. что именно означает «не работает должным образом»? пожалуйста, будьте более конкретными.

2. Нажатие клавиши со стрелкой вниз переместит вас к первому варианту. Но это все. Это не будет выбором при вводе. Но это очень хорошо работает с щелчком мыши.

Ответ №1:

После небольшого изменения я смог устранить проблему. Спасибо. *** ввод для нажатия клавиши***

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