数据列表属性在Google Chrome中不起作用 [英] Datalist attribute is not working in google chrome

问题描述

Datalist属性在Google chrome中不起作用，在Firefox中工作正常

Datalist attribute is not working in Google chrome, it is working fine in Firefox

请在此处查看 http://prntscr.com/arny81

谢谢您的帮助.

HTML

<td><input onkeyup="showCustomers(this.value)" placeholder="Enter Customer Name" list="selectCust" name="Cno" />
<datalist id="selectCust">
                    </datalist>
</td>

JavaScript

Javascript

function showCustomers(str) {
     if (str.length == 0) {
    document.getElementById("selectCust").innerHTML = "";
    return;
    } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("selectCust").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET", "getCustomers.php?q=" + str, true);
    xmlhttp.send();
}
}

getCustomers.php文件

getCustomers.php File

<?php include('conn.php'); ?>
<?php // get the q parameter from URL

$q = $_REQUEST["q"];
// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);


                    $sql2 = 'SELECT Customer_Name as Cname,No from customers order by Customer_Name';
                    $result2 = mysqli_query($connection, $sql2) or die(mysqli_error($connection));

                    if (mysqli_num_rows($result2) > 0) { 
                        ?><option value=""></option><?php
                        // output data of each row
                        while($row2 = mysqli_fetch_assoc($result2)) { 
                        if (stristr($q, substr($row2["Cname"], 0, $len))) { ?>
                        <option value="<?php 
                                echo $row2['No']; ?>"><?php echo $row2["Cname"]; ?></option>
                    <?php } }  ?>
                <?php } } ?>

我根本没有使用CSS.

I have not used CSS at all.

推荐答案

在您的CSS中定位ID，应该可以正常工作.

Target the ID in your CSS instead, that should work fine.

HTML:

<datalist id="dl">
   Your content goes here
</datalist>

CSS:

#dl {
   display: block;
}

这在Chrome或任何其他浏览器中都可以正常工作.

This works fine in Chrome or any other browser.

这篇关于数据列表属性在Google Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！