Question

我正在使用MySql数据库在PHP中开发一个Web应用程序，并使用ajax创建了一个搜索建议框。问题是我可以用鼠标选择建议并自动完成，但是当我尝试用键盘自动完成它时（用向上箭头向下选择它并按下回车键）它什么都不做。这是我的CSS，ajax还是只是html的问题？能否请你帮忙，感谢所有的帮助，谢谢。

这是我的代码： 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

请参阅此Autocomplete library docs。

您可以使用常规AJAX来获取记录并使用自动填充库渲染这些记录。

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

1 个答案: