List search results

The following describes how to show a list of results next to your map. Quite a few people have asked for this, so I figured I'd show a simple way to do it.

Please note, though, that there are some display issues and limits with this. You won't be able to show more than 500 results at a time, and you will want to style your list to either have scroll bars, or replace your map entirely.

For a more advanced example, see the Connect Chicago Locator and it's source code.

Edit index.html

Add this to your left sidebar area.

<div class='well'>
  <div id='results_list'></div>
</div>

Edit js/maps_lib.js

Add this line to the end of the submitSearch function.

self.getList(whereClause);

Add these functions below the displaySearchCount function. Note that you will need to explicitly set selectColumns to the columns you want to display in your list. If you want to display more or less than 4 (the number in this example), you will need to add or remove rows in the template in the displayList function.

  MapsLib.prototype.getList = function(whereClause) {
    var self = this;
    var selectColumns = 'name, address, hours, recyclables ';

    self.query({ 
      select: selectColumns, 
      where: whereClause 
    }, function(response) { 
      self.displayList(response);
    });
  },

  MapsLib.prototype.displayList = function(json) {
    var self = this;

    var data = json['rows'];
    var template = '';

    var results = $('#results_list');
    results.hide().empty(); //hide the existing list and empty it out first

    if (data == null) {
      //clear results list
      results.append("<li><span class='lead'>No results found</span></li>");
    }
    else {
      for (var row in data) {
        template = "\
          <div class='row-fluid item-list'>\
            <div class='span12'>\
              <strong>" + data[row][0] + "</strong>\
              <br />\
              " + data[row][1] + "\
              <br />\
              " + data[row][2] + "\
              <br />\
              " + data[row][3] + "\
            </div>\
          </div>";
        results.append(template);
      }
    }
    results.fadeIn();
  },