找到你要的答案

Q:Datalist not opening after repopulation

Q:DataList不开放后再生

I'm using AJAX to retrieve information from a database, this was provided for me through another question on StackOverflow, and I've got it working how I want (Minus this one fluke).

Here's how this is set up:

<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();
}

Now, when typing into the input field I expect the datalist to update continuously, which it does, the only issue is that the dropdown list is not visible, and I can't access it until I click off of the input field, and then back on the dropdown arrow.

How can I resolve this?

PHP Code for those who are curious:

<?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);
?>

The JSON being sent to the client is being parsed correctly, just to re-iterate, the issue is that the datalist is not being shown properly.

我使用Ajax从数据库中检索信息,这是通过计算器上的另一个问题是我提供的,我已经有了工作我想(减去这一侥幸)。

以下是如何设置:

<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被发送到客户端,正在分析正确,只是重申,问题是,数据未显示正确。

javascript  php  html