Атрибут списка данных не работает в Google Chrome

Атрибут Datalist не работает в Google Chrome, он отлично работает в 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

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

<?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.


html attributes
person Manchestor Laljii    schedule 13.04.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вместо этого укажите идентификатор в своем CSS, это должно работать нормально.

HTML:

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

CSS:

#dl {
   display: block;
}

Это отлично работает в Chrome или любом другом браузере.

person goncalopinto    schedule 13.04.2016
comment
Не могли бы вы уточнить, как настроить таргетинг на идентификатор в CSS? - person Manchestor Laljii; 13.04.2016
comment
На самом деле я не писал datalist{display:none}, это автоматически делается браузером - person Manchestor Laljii; 13.04.2016
comment
Опубликуйте свой HTML и CSS, чтобы я мог видеть, что там не так. - person goncalopinto; 14.04.2016
comment
Здравствуйте, Гонкалопинто. Пожалуйста, проверьте мой отредактированный вопрос. - person Manchestor Laljii; 14.04.2016
comment
Вы пытались добавить CSS, который я включил в свой ответ? У меня это работало хорошо в нескольких проектах, вчера я попробовал еще раз (просто чтобы убедиться, что он отлично работает в новом Chrome), я попробовал в Firefox, IE и Edge, и все работало нормально. Но вам нужно установить в CSS, иначе он не будет работать (по крайней мере, в Chrome). - person goncalopinto; 14.04.2016
comment
Попробуйте это для тестирования, это точно сработает: ‹datalist id=selectCust style=display: block› testing ‹/datalist› - person goncalopinto; 14.04.2016
comment
Это тот же самый prntscr.com/as2s5c, он выглядит странно, и я не могу выбрать ни одного из них - person Manchestor Laljii; 14.04.2016
comment
Есть ли другая альтернатива для списка данных, например, путем слияния Select Dropdown и Input Textfield. - person Manchestor Laljii; 14.04.2016
comment
Проверьте эту статью, я думаю, что в ней есть вся информация, необходимая для решения ваших проблем: stackoverflow.com/questions/27494084/ Проверьте и это: devcurry.com/2011/08/html-5-datalist-element-with-fallback.html - person goncalopinto; 14.04.2016
comment
Это тоже не решает, какой другой вариант вместо даталиста? - person Manchestor Laljii; 17.04.2016
comment
У вас есть обходной путь и полная документация по спискам данных здесь: noupe.com/design/ - person goncalopinto; 18.04.2016