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. Source code.

Edit index.html

Add this to your left sidebar area.

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

Edit source/maps_lib.js

Add this line to the end of the submitSearch function.

MapsLib.getList(whereClause);

Add these functions below the displaySearchCount function.

getList: function(whereClause) {
  var selectColumns = "name, address, hours, recyclables ";
  MapsLib.query(selectColumns, whereClause, "MapsLib.displayList");
},

displayList: function(json) {
  MapsLib.handleError(json);
  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();
},