Fixed sort but for titles with spaces

collection-sorting.liquid

<!-- /snippets/collection-sorting.liquid -->
<div class="form-horizontal">
  <label for="SortBy" class="uppercase">{{ 'collections.sorting.title' | t }}&nbsp;</label>
  <select name="SortBy" id="SortBy">
    <option value="manual">{{ 'collections.sorting.featured' | t }}</option>
    <option value="best-selling">{{ 'collections.sorting.best_selling' | t }}</option>
    <option value="title-ascending">{{ 'collections.sorting.az' | t }}</option>
    <option value="title-descending">{{ 'collections.sorting.za' | t }}</option>
    <option value="price-ascending">{{ 'collections.sorting.price_ascending' | t }}</option>
    <option value="price-descending">{{ 'collections.sorting.price_descending' | t }}</option>
    <option value="created-descending">{{ 'collections.sorting.date_descending' | t }}</option>
    <option value="created-ascending">{{ 'collections.sorting.date_ascending' | t }}</option>
  </select>
</div>

<script>
  /*============================================================================
    Inline JS because collection liquid object is only available
    on collection pages, and not external JS files
  ==============================================================================*/
  Shopify.queryParams = {};
  if (location.search.length) {
    for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
      aKeyValue = aCouples[i].split('=');
      if (aKeyValue.length > 1) {
        Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
      }
    }
  }

  $(function() {
    $('#SortBy')
      .val('{{ collection.sort_by | default: collection.default_sort_by }}')
      .bind('change', function() {
        Shopify.queryParams.sort_by = jQuery(this).val();
        location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20');
      }
    );
  });
</script>