BUSCADOR DE ROM's
***Descarga también el respectivo Flash Tool***
...
...
...
...
Reporta cualquier error a miweb.ds@gmail.com

viernes, 25 de diciembre de 2015



Autocomplete con Hoja de Calculo/HTML/CSS/jQuery/GS


Aprovechar la hojas de cálculo de Google en la construcción de un Autocomplete nos per... thumbnail 1 summary






Aprovechar la hojas de cálculo de Google en la construcción de un Autocomplete nos permitirá poder editar fácilmente las opciones de la lista mostrada, ya sea modificándolas, agregando o quitando las existentes, evitando con esto tener que editar el código de nuestra aplicación web.

Código.gs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
function doGet() {
  var html = HtmlService.createTemplateFromFile("page").evaluate();
  html.setTitle("Lupa");
  return html;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
}

function listaDePaisesGS(){
  var paises1 = SpreadsheetApp.openById("1ryLnEozeuUji79b-a9YnZvH3BPoSkKDMf9v_nj6L-nc").getSheetByName("Autocomplete");
  var paises2 = new Array();
  paises2 = paises1.getRange(1, 1, 1000, 1).getValues();
  return paises2;
}


css.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
#global{
    width:100%;
    height:100px;
    text-align:center;
}

#elegirPais{
    margin-top:50px;
}

.ui-menu .ui-menu-item a{
  font-family:Segoe UI;
  font-size:0.8em;
  color: #000;
  border: none;
}

.ui-state-hover, .ui-autocomplete a:hover{
    background:#eee;
    outline:none;
}
.ui-autocomplete { height: 400px; overflow-y: scroll; overflow-x: hidden;}
</style>


js.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script>
$(function() {
  google.script.run.withSuccessHandler(listaDePaises).listaDePaisesGS();
});

function listaDePaises(paises1) {
  var paises=[];
 
  for(var i=0;i<1000;i++){
    paises[i]=paises1[i].toString();
  }
 
  $( "#elegirPais" ).autocomplete({
    source: paises
  });
}
</script>


page.html

1
2
3
4
5
6
<?!= include('css'); ?>
<?!= include('js'); ?>

<div id="global">
      <input type="text" id="elegirPais" placeholder="Digitar un país">
</div>


Enlace con código ejemplo del proyecto en la descripción del video

No hay comentarios

Publicar un comentario en la entrada