使用Ajax的HTML搜索建议无法通过键盘自动完成

Question

I am developing a web application in PHP with a MySql database, and made a search suggestion box with ajax. The problem is that I can select the suggestions with my mouse and it auto completes but when I try to auto complete it with my keyboard (select it with arrow up arrow down and pressing enter) it does nothing. Is this a problem of my css, ajax or just html??? Could you please help with this, All help is appreciated, Thanks.

Here is my code : Ajax

$term = mysqli_real_escape_string($link, $_REQUEST['term']); if(isset($term)){

// Attempt select query execution

$sql = "SELECT * FROM something WHERE name LIKE '" . $term . "%' LIMIT 4";

if($result = mysqli_query($link, $sql)){

    if(mysqli_num_rows($result) > 0){

        while($row = mysqli_fetch_array($result)){

            echo "<p>" . $row['name'] . "</p>";

        }

        // Close result set

        mysqli_free_result($result);

    } else{

        echo "<p>No Results</p>";

    }

} else{

    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);

} }

CSS

   .result{  position: absolute;        

    z-index: 999;

    top: 100%;

    left: 0;

}

.search-box input[type="text"], .result{

    width: 100%;

    box-sizing: border-box;

}

/* Formatting result items */

.result p{

    margin: 0;

    padding: 7px 10px;

    border: 0px solid #CCCCCC;

    border-top: none;

    cursor: pointer;

    background: #ffffff;

}

.result p:hover{

    background: #f2f2f2;

}

JAVASCRIPT

$(document).ready(function(){

$('.search-box 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("something.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(".search-box").find('input[type="text"]').val($(this).text());

    $(this).parent(".result").empty();

}); });

HTML

<form align=center method='POST' action='index.php?cmd=list-something'>
            <h1 class="text-center">Search</h1>
            <div class="form-group">
                <div class="input-group search-box">
                    <input class="form-control" type="text" autocomplete="off" name="search" id="search" placeholder="Search"/>
                        <div class="result"></div>
                    <span class="input-group-btn">
                        <button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"><span style="margin-left:10px;">Pesquisar</span></button>
                    </span>
                    </span>
                </div>
            </div>
</form> 

Answer 1

Please refer this Autocomplete library docs .

You can implement normal AJAX for fetching records and render those records using Autocomplete library.