0
222
ViewsHow to show in drop down div? javascript html
i have a script which gets the automplete data from api:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://js.radar.com/v3/radar.min.js"></script>
</head>
<body>
<input name="autocomplete" id="autocomplete" oninput="onclickhandler()">
<script>
function onclickhandler() {
var data = [];
function getName(data) {
//console.log(data);
console.log(data);
var names = [];
for (var i = 0; i < data.length; i++) {
names.push(data[i].formattedAddress);
}
console.log(names);
}
var text=document.getElementById("autocomplete").value;
var theUrl="https://api.radar.io/v1/search/autocomplete?
query="+text+"&country=IND&limit=5";
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
// false for synchronous request
xmlHttp.setRequestHeader("Authorization","my_api");
xmlHttp.send( null );
//console.log(xmlHttp.responseText);
data = JSON.parse(xmlHttp.responseText);
getName(data);
var count = Object.keys(data).length +1;
console.log(count);
for (var i = 0; i <= count; i++) {
var yourValue = data.addresses[i].formattedAddress;
console.log(yourValue);
}
}
</script>
</body>
</html>
which gives the result in console :
Meerut, UP IND Muradnagar, UP IND Muzaffarnagar, UP IND HR IND
what i want is to show a dropdown as shown image linked with input:
and when user select a dropdown it must update the value of input field just same like google maps places autocomplete api.
Thankyou in advance <3;
·
Juan Pablo Isaza
Answer question