0

Actualmente he creado un formulario que permita buscar información que se tiene en una hoja de cálculo que se encuentra en Google Sheets. Sólo lleno un campo en el primer input y doy click en el campo azul y se autocompleta los campos de país y color d polo.
https://script.google.com/macros/s/AKfycbyIG0yETD73_6I1o3Yi8vBYuR2hVmLZSrcoqvZSiPs1X8zksBiR/exec , este es su código

index.html

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<script>

   function buscaInformacion(){
      google.script.run.withSuccessHandler(getLlegada). getLlegadaSS(document.forms[0]);
      google.script.run.withSuccessHandler(getSalida). getSalidaSS(document.forms[0]);
   }

   function getLlegada(llegada){
     var txtLlegada = document.getElementById('llegada');
     txtLlegada.value = llegada;
   }

   function getSalida(salida){
      var txtSalida = document.getElementById('salida');
      txtSalida.value = salida;
   }

   $(function() {
      $( "#buscar" ).click(buscaInformacion);
   });

  // Prevent forms from submitting.
  function preventFormSubmit() {
     var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
         event.preventDefault();
       });
       }
     }

   window.addEventListener('load', preventFormSubmit);

   function mostrar_mensaje() {
     var valor=document.getElementById("id").value;
     if(valor!=""){
        $("#suggesstion-box").show();
     }else{
       $("#suggesstion-box").hide();
     }
   }

  function selectCountry(val,val2,val3) {
    $("#id").val(val);
    $("#llegada").val(val2);
    $("#salida").val(val3);
    $("#suggesstion-box").hide();
   }
  </script>

  <html>
  <body bgcolor="e3e5e8">
  <br><br>

  <div align="center" >

  <form id="datosPersona" name="datosPersona" autocomplete="off">
  <table>
   <tr>
    <td>
       <label for="llegada">NOMBRE</label>
        <input type="text" id="id" name="id" onkeyup="mostrar_mensaje();">
         <div id="suggesstion-box" style="position: absolute;display: none">
         <ul id="country-list" style="background-color: #aac5f5;width: 300px" >
          <li onClick="selectCountry('valor 1','completar 1.1','completar 1.2');">valor 1</li>
         <li onClick="selectCountry('valor 2','completar 2.1','completar 2.2');">valor 2</li>
      </ul>
   </div>
   </td>
 </tr>
 <tr>
  <td>
    <label for="llegada">PAIS</label>
    <input type="text" id="llegada" name="llegada">
 </td>
</tr>
<tr>
  <td>
     <label for="salida">COLOR POLO</label>
      <input type="text" id="salida" name="salida" >
    </td>
 </tr>
 </table>

  <br><br><br>
   <button id="buscar">Buscar</button>

   </form>
  </div>
  </body>
  </html>

Cuando pongo un valor en el campo de id="id" , me muestra un div, el cual tiene <ul></ul>, y la información que se tiene dentro del <li> es que lo que yo doy por predeterminado, pero lo que busco es que me aparezca información que se tiene en una hoja de cálculo como BASE DE DATOS, y se autocomplete de acuerdo al <li> que de click.

7
  • Me parece que la pregunta es demasiado amplia, por otro lado el HTML no incluye ninguna etiqueta select. ¿Debemos entender que quieres reemplazar la etiqueta input con id="id" por una etiqueta select? ¿Que te ha impedido hacerlo en el código de la pregunta?
    – Rubén
    el 27 ago. 2019 a las 4:59
  • no quiero reemplazar el input con id="id" por un select, sino que debajo de ese input tener un div oculto, que aparezca cuando ingrese un valor. esa imagen que subi es eso, pero yo lo hize con html,php,javascript,mysql ... pero en este caso quiero hacerlo en formulario de google
    – user83889
    el 27 ago. 2019 a las 15:23
  • Agrega eso a la pregunta y edita el título.
    – Rubén
    el 27 ago. 2019 a las 15:37
  • @Rubén ya lo agregue
    – user83889
    el 27 ago. 2019 a las 16:05
  • Me refería a agregar tu comentario previo, pero bueno, agregar el código que usa PHP no está mal pero deberías revisar la redacción pues no se entiende que tiene que ver ese código con lo que estás preguntando. Considera que la pregunta debe ser clara sin necesidad de leer los comentarios o contenido externo.
    – Rubén
    el 27 ago. 2019 a las 16:19

1 respuesta 1

-1

Para tomar datos de una hoja de cálculo de Google desde el código del lado del cliente se debe llamar una función del lado del servidor usando google.script.run como ya se hace en tu código.

En tu código del lado del cliente deberás agregar una función que haga la llamada al código del lado del cliente y que use el resultado para actualizar los elementos <li> del <ul>. Como lo mencionaste en un comentario, puedes usar un evento onkeyup o similiar, para lo cual es recomendable usar addEventListener al cargar la página.

Usando "Vanilla JavaScript" (sin librerías como jQuery), para reemplazar todos los elementos hijo del ul podrías usar

document.querySelector('ul').innerHTML = resultado;

donde resultado es el lo que te devolvió la función del lado del servidor formada apropiadamente.

Cabe hacer notar que las llamadas a servicios de Google Apps Script como SpreadsheetApp son relativamente lentas y tienen cuotas relativamente pequeñas (comparándolo con un servicio de paga basado en hits, MB, uso de procesadores, etc) por lo que dependiendo del uso que le vayas a dar a tu aplicación es probable que debas buscar otra estrategia, quizás pasar los datos de tu hoja de cálculo a una plataforma como Firebase y que el código del lado del cliente lo tome de dicha plataforma.

Referencias

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.