Question

我使用AJAX从数据库中检索信息，这是通过StackOverflow上的另一个问题为我提供的，并且我已经按照我想要的方式工作（减去这个侥幸）。

以下是如何设置的：

<script>
var input = document.getElementById('search_bar');
input.addEventListener('keypress', function () {
    callServer(input);
});
</script>
  <script>
  function callServer (input) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            //return the JSON object
            console.log(xmlhttp.responseText);
            var arr = JSON.parse(xmlhttp.responseText);
            var parentDiv = document.getElementById('items');
            parentDiv.innerHTML = "";
            //fill the options in the document
            for(var x = 0; x < arr.length; x++) {
                var option = document.createElement('option');
                option.value = arr[x];
                //add each autocomplete option to the 'list'
                parentDiv.appendChild(option);
            };

        }
    }
    xmlhttp.open("GET", "incl/search.php?value="+input.value, true);
    xmlhttp.send();
}

现在，当输入输入字段时，我希望数据列表能够连续更新，它唯一的问题是下拉列表不可见，我无法访问它直到我点击输入字段，然后返回下拉箭头。

我该如何解决这个问题？

PHP代码对于那些好奇的人：

<?php
    include 'connection.php';
    $results = array();
    if(!isset($_GET['value'])) {
        array_push($results, 'No results found.');
        die(json_encode($results));
    }

    $value = $_GET['value'];

    $statement = $connection->prepare("SELECT name FROM `item_table`.`items` WHERE `name` LIKE :val LIMIT 5");

    $value = '%'.$value.'%';
    $statement->bindParam(":val", $value);
    if($statement->execute()) {
        $rows = 0;
        while($row = $statement->fetch()) {
            $rows++;
            array_push($results, $row['name']);
        }
        if($rows == 0) {
            array_push($results, 'No results found.');
            die(json_encode($results));
        }
    } else {
        array_push($results, 'No results found.');
        die(json_encode($results));
    }
    echo json_encode($results);
?>

正在正确解析发送到客户端的JSON，只是为了重新迭代，问题是数据列表没有正确显示。

重新填充后，Datalist没有开放

0 个答案: