I sent a server request to retrieve street names, expecting them to appear as options in a datalist. However, in Google Chrome, they did not display correctly. On the other hand, Firefox and IE showed the correct street names. Here is the code snippet:
Here's the HTML:
<li>
<label>Street <span class="required">*</span></label>
<input id="input_strasse" type="text" value ="Strasse" autocomplete="off" list="input_strasse_datalist" class="field-long" placeholder="Street" />
<datalist id="input_strasse_datalist" ></datalist>
</li>
Javascript:
$(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("string: ", 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";
}
})
})
I discovered that the user-agent gives datalist display: none. When I changed the datalist display to block, it appears like this:
https://i.sstatic.net/CxXKi.png
However, it should look like this: https://i.sstatic.net/hU1GN.png
The strange thing is that it works fine on the local version of the app. The odd behavior only occurs when I run it on the server in Chrome. I'm at a loss here. Please assist. Thank you!