Reputation: 1
I tried to no avail to get HTML, CSS and Javascript to limit number of items in datalist, for whatever reason, it is isn't working. The list is populated by a loop on a array.
<datalist id="trainNoList">
<script>
if (markers)
{
var options = '';
var trainNoList = [];
for (var i = 0; i < markers.length; i++) {
var trainNo = markers[i][20];
trainNoList.push(trainNo);
options += "<option value='" + trainNoList[i] + "'></option>";
}
}
</script>
</datalist>
<!-- Use JavaScript to pan to the train when an option is selected -->
<script>
$("#trainNoInput").on("input", function() {
var selectedTrainNo = $(this).val();
// Check if the input is a range
var rangeCheck = selectedTrainNo.split("-");
if (rangeCheck.length === 2) {
vehiclestart = rangeCheck[0];
vehicleend = rangeCheck[1];
} else {
// Perform the same actions as in the original code
for (var i = 0; i < markers.length; i++) {
var trainNo = markers[i][20];
if (trainNo == selectedTrainNo) {
var lat = parseFloat(markers[i][2]);
var lng = parseFloat(markers[i][3]);
var setcontentforpopup = "Vehicle"+markers[i][0]+"";
vehiclestart = 1;
vehicleend = 99999999999999;
var popup = L.popup()
.setLatLng([lat, lng])
.setContent(setcontentforpopup)
.addTo(map);
map.flyTo([lat, lng], 16);
break;
}
}
}
});
$("#trainNoInput").on("focus", function() {
console.debug("The trainNoInput field has received a keyup event");
clearTimeout(ajaxtimeout);
});
$("#trainNoInput").on("blur", function() {
ajaxtimeout = setTimeout(foo, 10000);
console.debug("no");
});
$("#trainNoInput").on("keyup", function(event) {
if (event.keyCode === 13) {
markerLookup = {};
markerClusters.clearLayers();
foo();
}
});
</script>
The desire result is simple - limit number of items shown down to 5 or whatever set amount and add a scroll bar to scroll down to see the remainder of the records
Upvotes: 0
Views: 80