ernesmb · June 26, 2016 16:13
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>SearchBox with autocomplete | CartoDB</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
  
  <style>
    html, body, #map {
      height: 100%;
      padding: 0;
      margin: 0;
    }
    /*.cartodb-logo{
      display:none!important;
    }*/
  </style>
  <style>
  .ui-autocomplete-loading {
    background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
  }
  </style>
  
  <script>
  function initAutocomplete() {

    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    var sql = cartodb.SQL({ user: 'ernestomb' });
    $( ".cartodb-searchbox .text" ).autocomplete({
      source: function( request, response ) {
        var s
        sql.execute("select name, adm0_a3 from populated_places where name ilike '" + request.term + "%'").done(function(data) {
           response(data.rows.map(function(r) {
              return {
                label: r.name+', '+r.adm0_a3,
                value: r.nameunit
              }
            })
          )
        })
      },
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value :
          "Nothing selected, input was " + this.value );
      }
    });
  };
  </script>

  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <!-- 
  <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  -->
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

 </head>
 <body>

  <script type="text/html" id="cartoCSS">
    /** simple visualization */

    #municipios{
      marker-type:ellipse;
      marker-width:6px;
      marker-fill:red;
    }
  </script>

  <div id="map"></div>

  <!-- include cartodb.js library -->
  <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
  <!--
  <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> 
  -->
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

     
  
  <!-- Drop your code between the script tags below! -->
  <script>

  layerSource={
    user_name: 'ernestomb',
    type: 'cartodb',
    sublayers: [{
       sql: 'SELECT * FROM populated_places',
       cartocss: $('#cartoCSS').html()
    }]
  }
  
  
  map= new L.Map('map', {
    zoom:2,
    center:[40.5,-3.6]
  });

  L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', 
      {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    }).addTo(map);

  cartodb.createLayer(map, layerSource,{
    	//options
  }).addTo(map)
  .done(function(layer){
      //do stuff
      var v = cdb.vis.Overlay.create('search', map.viz, {})
      v.show();
      $('#map').append(v.render().el);
      initAutocomplete();
    });
  
  </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>SearchBox with autocomplete \| CartoDB</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />

	<style>
	html, body, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	}
	/*.cartodb-logo{
	display:none!important;
	}*/
	</style>
	<style>
	.ui-autocomplete-loading {
	background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
	}
	</style>

	<script>
	function initAutocomplete() {

	function log( message ) {
	$( "<div>" ).text( message ).prependTo( "#log" );
	$( "#log" ).scrollTop( 0 );
	}

	var sql = cartodb.SQL({ user: 'ernestomb' });
	$( ".cartodb-searchbox .text" ).autocomplete({
	source: function( request, response ) {
	var s
	sql.execute("select name, adm0_a3 from populated_places where name ilike '" + request.term + "%'").done(function(data) {
	response(data.rows.map(function(r) {
	return {
	label: r.name+', '+r.adm0_a3,
	value: r.nameunit
	}
	})
	)
	})
	},
	minLength: 2,
	select: function( event, ui ) {
	log( ui.item ?
	"Selected: " + ui.item.value :
	"Nothing selected, input was " + this.value );
	}
	});
	};
	</script>

	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<!--
	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	-->
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

	</head>
	<body>

	<script type="text/html" id="cartoCSS">
	/** simple visualization */

	#municipios{
	marker-type:ellipse;
	marker-width:6px;
	marker-fill:red;
	}
	</script>

	<div id="map"></div>

	<!-- include cartodb.js library -->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
	<!--
	<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
	-->
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>



	<!-- Drop your code between the script tags below! -->
	<script>

	layerSource={
	user_name: 'ernestomb',
	type: 'cartodb',
	sublayers: [{
	sql: 'SELECT * FROM populated_places',
	cartocss: $('#cartoCSS').html()
	}]
	}


	map= new L.Map('map', {
	zoom:2,
	center:[40.5,-3.6]
	});

	L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
	{attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
	}).addTo(map);

	cartodb.createLayer(map, layerSource,{
	//options
	}).addTo(map)
	.done(function(layer){
	//do stuff
	var v = cdb.vis.Overlay.create('search', map.viz, {})
	v.show();
	$('#map').append(v.render().el);
	initAutocomplete();
	});

	</script>

	</body>
	</html>