3

The search box in a published map of CartoDB isn't linked to the dataset which is shown in the CartoDB map. How can I link the search box to a certain column of a dataset?

1

Hope this link can do some help for you. The code in the link can do the auto-complete for the search box in terms of one certain column in your cartodb table.

http://bl.ocks.org/javisantana/7932459

    var sql = cartodb.SQL({ user: 'YOUR_CARTODB_ACCOUNT_NAME' });
            $(YOUR_INPUT_BOX).autocomplete({
                source: function( request, response ) {
                    var s
                    sql.execute("select COLUMN_NAME from TABLE_NAME where COLUMN_NAME ilike '" + request.term + "%'").done(function(data) {
                        response(data.rows.map(function(r) {
                                return {value: r.COLUMN_NAME};
                            })
                        )
                    })
                },
                minLength: 2
            });

Basically, this piece of code helps auto complete the input box by matching the input text with all values in the column of your cartodb table.

    sql.execute("select COLUMN_NAME from TABLE_NAME where COLUMN_NAME ilike '" + request.term + "%'").done(function(data) {
                        response(data.rows.map(function(r) {
                                return {value: r.COLUMN_NAME};
                            })

This piece of code is used to search your cartodb table in terms of the input text.
The callback method returns all matched values. If you have more than one matched value, it will draw a drop-down list for you to show all results.

Do not forget to include this two sources.

        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  • Could you please include the code snippet and maybe some explanantion how/why it works in your answer? – Kersten Sep 22 '15 at 6:03
  • code snippet added. I may not explain it very well, but if you are still confused about how it works, please add comment :) – Speir Sep 22 '15 at 7:09
0

As you say,the searchbox acts naturally as a geocoder.

In order to make it search inside your table you'll need to use CartoDB.js and develop custom code.

The basic ideas are:

  • You need to extend the functionality of the searchbox or to create any other text-box to provide this functionality

  • You'll need to build a query in which your results will be searched

  • You'd want to get the results of the query and center the map in that position (map.fitBounds will do this, check the example below)

Let me show you an example here. It's a bit different that what you're asking because I've implemented a selector directly, but you can change the selector by a text-box and get the value of it to insert it into the query. Its source code is as follows:

<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map {
height: 95%;
padding: 0;
margin: 0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" 
  href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
 <!--[if lte IE 8]>
<link rel="stylesheet"    
  href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.ie.css"    />
<![endif]-->
</head>
<body>
<div id="map"></div>

<div>
<p>Use the selector to choose the country in which you want the map to be    centered:</p>

<select id="trail-selector">
  <option value="esp">Spain</option>
  <option value="por">Portugal</option>
  <option value="ita">Italy</option>
  <option value="bra">Brazil</option>
</select>

</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
<script>
  var layer;
  function main() {

    var map;

    var layerUrl = 'YOUR_VIZ_JSON';

    cartodb.createVis('map', layerUrl)
      .on('done', function(vis, layer) {

     map = vis.getNativeMap();
    }).on('error', function() {
      cartodb.log.log("some error occurred");
    });

    function processFormData() {
    var input = $( "#trail-selector option:selected" ).text();
    return input;
    }

    var search_text;
    $(document).on('change','#trail-selector',function(){
     search_text = processFormData();
     var sql = new cartodb.SQL({ user: 'YOUR_USERNAME' });
       sql.getBounds("SELECT * FROM world_borders_9 where name Like '" + search_text + 
       "'").done(function(bounds) {
       map.fitBounds(bounds)
      });
    });



  }
  window.onload = main;
     </script>
    </body>
  </html>

And a special comment in general:

This use case always gets the same question. "Oh, people will be able to inject SQL in my application?"

The queries will use the CartoDB SQL API, which is safe to use and is sql injection safe. Of course, if you have public data stored in your account it could be accessed, but it's not a bug, it's a feature called SQL API. Please, never add your API key in one of these queries, as this is a security leak and anybody that access to your Javascript file will be able to get your API key and get access to check, edit or remove your data. But don't be alarmed, this is the same that if you share your password publicly! :-)

  • 1
    Not sure either answer fits the question, and I have the same issue. I just want a text box search field to query a certain field in the displayed cartoDB dataset. I don't need to autocomplete the entry, and I don't need a drop down list of options to pick, just a search field linked to the current table. Any code snippets to make that happen? – user25644 May 25 '16 at 17:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.