2013 web challenge business directory

business_directory.js

// Build the select dropdown
// This goes in the page where you would like the search to render.
<div id="searchHeader">
  <ul>
    <li>
      <label for="filterByType">Filter By Type:</label>
      <select id="filterByType">
      </select>
    </li>
    <li style="display: none;">
      <label for="searchByName">Search By Name:</label>
      <input type="text" id="searchByName"/>
    </li>
  </ul>
</div>
<div id="searchResults"></div>
<script>
  var select = $j('#filterByType')
  select.empty().append($j('<option val="unselected">Filter By Type…</option>'))
  var types = []
  _.each(table_element_182694, function(obj){
    obj.type = obj.type.replace(/^\s*|\s*$/, '')
    types.push(obj.type)
  })
  types = _.uniq(types)
  types = types.sort()
  var options = []
  for(var i=0; i<types.length; i++){
    var $option = $j('<option val="'+types[i].replace(/(^\s*)|(\s*$)|(,)/g, '').replace(/\s/g,"_")+'">'+types[i]+'</option>')
    options.push($option)
  }
  for(var i=0; i<options.length; i++){
    select.append(options[i])
  }
</script>


// Scripts for search and rendering results
(function($){
  //
  //  @param {Integer} id
  //  @param {Object} attrs
  //
  $(document).ready(function(){
    var attrs = {
      address: 'address',
      facebook_link: 'facebook_link',
      google_places: 'google_places',
      hours: 'hours',
      name: 'name',
      phone: 'phone',
      photo_url: 'photo_url',
      type: 'type',
      group: 'group',
      website: 'website',
      yelp_listing: 'yelp_listing'
    }
    var types = {}
    _.each(table_element_182694, function(obj){
      obj.group = obj.type
      obj.type = obj.type.replace(/(^\s*)|(\s*$)|(,)/g, '').replace(/\s/g,"_")
      types[obj.type] = []
    })
    var keys = Object.keys(types)
    _.each(table_element_182694, function(obj){
      var key = _.find(keys, function(type){ return type === obj.type })
      types[key].push(obj)
    })
    var type
    var media

    $('#filterByType').on('change', function(){
      if($('#searchByName').not(':visible')){
        $('#searchByName').parent().show()
      }
      $('#searchResults').children().remove()
      type = $(this).find('option:selected').attr('val')
      media = types[type]
      if(type === 'unselected'){
        $('#searchByName').parent().hide()
      }
      _.each(media, function(obj){
        $('#searchResults').append(buildMarkup(obj, attrs))
      })
    })

    $('#searchByName').on('keyup', function(){
      val = $(this).val().toLowerCase()
      results = searchByName(val)
      $('#searchResults').children().remove()
      _.each(results, function(obj){
        $('#searchResults').append(buildMarkup(obj, attrs))
      })
    })

    function searchByName(val){
      var results = _.filter(media, function(obj){
        return ~obj.name.toLowerCase().indexOf(val)
      })
      return results
    }

    function buildMarkup (media, attrs){
    // you can modify this for your application

      var $markup = $('<ul class="media-block"/>')
      var hoursTemplate = ''
      var template = '' +
        '<li class="media-block-module">' +
        ' <div class="media-avatar">' +
        '   <a href="' + media[attrs.website] + '" class="photo-box">' +
        '     <img src="' + media[attrs.photo_url] + '" />' +
        '   </a>' +
        ' </div>' +
        ' <div class="media-story">' +
        '   <div class="item-title">' +
        '     <a href="">' + media[attrs.name] + '</a>' +
        '   </div>' +
        '   <ul class="media-content">' +
        '     <li class="address">' +
        '       <a href="https://maps.google.com/?mid=1339090648&q=' + media[attrs.address] + '">' + media[attrs.address] + '</a>' +
        '     </li>' +
        '     <li class="phone">' +
        '       <a href="tel:' + media[attrs.phone] + '">'+ media[attrs.phone] + '</a>' +
        '     </li>' +
        '     <li class="type">' + media[attrs.group] + '</li>' +
        '   </ul>' +
        ' </div>' +
        '</li>'

      var $template = $(template)

      if(media[attrs.facebook_link] || media[attrs.yelp_listing] || media[attrs.google_places]) {
        var socialTemplate = ''+
        '<li class="social">' +
        ' <ul></ul>' +
        '</li>'
        $template.find('.media-content').append(socialTemplate)
      }

      if(media[attrs.facebook_link]){
        var fbTemplate = '' +
        '<li class="facebook">' +
        '  <a href="' + media[attrs.facebook_link] + '"></a>' +
        '</li>'
        $template.find('.social ul').append(fbTemplate)
      }

      if(media[attrs.yelp_listing]){
        var yelpTemplate = '' +
        '<li class="yelp">' +
        '  <a href="' + media[attrs.yelp_listing] + '"></a>' +
        '</li>'
        $template.find('.social ul').append(yelpTemplate)
      }

      if(media[attrs.google_places]){
        var googleTemplate = '' +
        '<li class="googlePlaces">' +
        '  <a href="' + media[attrs.google_places] + '"></a>' +
        '</li>'
        $template.find('.social ul').append(googleTemplate)
      }

      if(media[attrs.hours]){
        var hoursWrapper = '' +
        '<li class="hours">' +
        ' <ul></ul>' +
        '</li>'
        $template.find('.media-content').append(hoursWrapper)
        var hours = media[attrs.hours].split(',')
        _.each(hours, function(hour){
          hoursTemplate += '<li class="hour">'+hour+'</li>'
        })
        $template.find('.hours ul').append(hoursTemplate)
      }

      $markup.append($template)

      return $markup

    }
  })

})(jQuery)

Need to refactor but it is what it is for now.

Update the script to be agnostic to the attrs keys based on whatever the attrs keys are. smart.