<form id="productSearch" method="get" action="">
    <label for="productCats">Filter by:</label>
    <select id="productCats">
        <option value="">ALL</option>
#foreach($cat in $categories.getChildrenCategoriesByKey('productTypes'))
        <option value="${cat.categoryVelocityVarName}">${cat.categoryName}</option>
#end
    </select>
</form>  <!-- ${esc.h}productSearch -->

<div id="productSearchResults"></div>

<script type="text/javascript">
    ${esc.d}(document).ready(function() {
        var showProducts = function(cat) {
            ${esc.d}.getJSON("/JSONContent/",
                {
                    type: 'json',
                    q: '%2BstructureName:product%20%2Bcategories:' + cat
                },
                function(data) {
                    ${esc.d}('${esc.h}productSearchResults').append('<ul></ul>');
                    ${esc.d}.each(data.contentlets, function(i, contentlet) {
                            ${esc.d}('${esc.h}productSearchResults ul').append('<li>' + contentlet.title + '</li>');
                    });
                }
            );
        };

        ${esc.d}('${esc.h}productCats').change(function() {
            var cat = ${esc.d}(this).val();
            showProducts(cat);
        });
    });
</script>