juanignaciosl/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Remote datasource</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.core.js"></script>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
  <style>
  .ui-autocomplete-loading {
    background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
  }
  </style>
  <script>
  $(function() {

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

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

<div class="ui-widget">
  <label for="country">City: </label>
  <input id="country">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Remote datasource</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.core.js"></script>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
	<style>
	.ui-autocomplete-loading {
	background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
	}
	</style>
	<script>
	$(function() {

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

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

	<div class="ui-widget">
	<label for="country">City: </label>
	<input id="country">
	</div>

	<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Result:
	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	</div>


	</body>
	</html>