Directory using Shopify blog content, sorted by title, with in-page quick search. As seen on: http://afavoritedesign.com/pages/the-peddlers with a full tutorial here: http://zoerooney.com/blog/tutorials/shopify-alphabetical-searchable-directory-page/

page-directory.liquid

<header class="page-title">
    <h1>{{ page.title }}</h1>
</header>
<section id="content">
    <div class="search-area">
        <div class="left">{{ page.content }}</div>
        <div class="right"><form><i class="icon-search"></i><input type="text" id="peddler-search" placeholder="type your city, state or postal code"></form></div>
    </div>
    <div class="locations">
        {% assign sorted_articles = blogs.peddlers.articles | sort: 'title' %}
        {% for article in sorted_articles %}
            {% unless article.tags contains 'international' %}

                <div class="location">
                    <h3>{{ article.title }}</h3>
                    <div class="columns">
                        {{ article.content }}
                    </div>
                </div>
            {% endunless %}
        {% endfor %}
        {% for article in sorted_articles %}
            {% if article.tags contains 'international' %}
                <div class="location">
                    <h3>{{ article.title }}</h3>
                    <div class="columns">
                        {{ article.content }}
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
</section><!-- #content -->
{{ "jquery.quicksearch.js" | asset_url | script_tag }}
<script>
jQuery(document).ready(function($){
    $('#peddler-search').quicksearch('.columns p', {
    	'show': function () {
    		$(this).show();
    		$(this).parents('.location').find('h3').show();
    	},
    	'hide': function () {
    		$(this).hide();
    		$('.location').each(function(){
    			if ( $(this).find('p:visible').length == 0 ) {
    				$(this).find('h3').hide();
    			}
    		});
    	}
    });
});
</script>