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 js/maps_lib.js

Add this line to the end of the submitSearch function.

MapsLib.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.

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();
},

Data row hyperlinks open in a new tab

If your data row contains a hyperlink and you require the link to open in a new tab append this additional code.

<a href=\"" + data[row][1] + "\" + onclick='return !window.open(this.href);' </a>

If you do not want the link to open in a new tab and require it to open in the same window please omit

 + onclick='return !window.open(this.href);'