tengo un script que obtiene los datos de autocompletar de 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>lo que da el resultado en la consola:
Meerut, ARRIBA IND Muradnagar, ARRIBA IND Muzaffarnagar, ARRIBA IND HR IND
lo que quiero es mostrar un menú desplegable como se muestra en la imagen vinculada con la entrada:
y cuando el usuario selecciona un menú desplegable, debe actualizar el valor del campo de entrada de la misma manera que Google Maps coloca la API de autocompletado.
Gracias de antemano <3;