Question

我发出服务器请求获取街道名称，他们应该显示为datalist选项....但在谷歌浏览器他们没有。在Firefox和IE中，它会弹出正确的请求街道名称。这是一些代码：

HTML：

      <li>
                <label>Straße <span class="required">*</span></label>
                <input id="input_strasse" type="text" value ="Strasse" autocomplete="off" list="input_strasse_datalist" class="field-long" placeholder="Straße" />
                <datalist id="input_strasse_datalist" ></datalist>
            </li>

JS：

  $(document).on("keyup", "#input_strasse", function () {

            var inputStr = $('#input_strasse').val();
            var charStr = inputStr.charAt(0).toUpperCase() + inputStr.substr(1);


            var UrlToWebservice = window.localStorage.getItem("url_to_webservice");
            console.log("buchstabensuppe: ", charStr)

            $.ajax({

                type: 'POST',
                url: UrlToWebservice + 'SP_SELECT_Strassen',
                data: { 'charStr': charStr },
                crossDomain: true,
                dataType: 'xml',
                success: function (response) {

                  //  var strassen = new Array;


                    $(response).find('STRASSE').each(function () {


                        var strasse = $(this).find('NAME').text();

                        var plz = $(this).find('PLZ').find('plz').text();

                        var ort = $(this).find('PLZ').find('ORT').text();

                        var arstrasse = $(this).find('AR').first().text();
                        console.log("arstrasse ", arstrasse)

                        $("#input_strasse_datalist").append('<option data-ar = ' + arstrasse + ' value = "' + strasse + ' (' + plz + ', ' + ort + ')">' + strasse + ' (' + plz + ', ' + ort + ')</option>')

                        $("#input_plz").val(plz)
                        $("#input_ort").val(ort)

                    })

                },

                error: function () {
                    window.location.hash = "httperror";
                }
            })



        })

我认识到user-agent提供了datalist display：none;如果我给出了数据显示：block;但它看起来像这样：

所以它不在Dropdown中，也没有选项可供选择。它应该如下所示：

真正奇怪的是，它在应用程序的本地版本上运行良好。只有当我在本地chrome中的服务器上运行它时才会出现奇怪的行为。我真的很无能为力。请帮忙。谢谢！

Answer 1

更新chrome后似乎有效。

版本63.0.3239.84不再有问题。

html datalist没有显示chrome中的选项

1 个答案: