Shopify ajax search

search-form.js

$(function() {
    var currentAjaxRequest = null;
    var searchForms = $('form[action="/search"]').css('position', 'relative').each(function() {
        var input = $(this).find('input[name="q"]');
        input.attr('autocomplete', 'off').bind('keyup change', function() {
            var term = $(this).val();
            var form = $(this).closest('form');
            var searchURL = '/search?type=product&q=*' + term + '*';
            var resultsList = $('.search-results');
            resultsList.perfectScrollbar({
                suppressScrollX: true
            });
            if (term.length > 3 && term !== $(this).attr('data-old-term')) {
                $(this).attr('data-old-term', term);
                if (currentAjaxRequest !== null) currentAjaxRequest.abort();
                currentAjaxRequest = $.getJSON(searchURL + '&view=json', function(data) {
                    resultsList.empty();
                    if (data.results_count === 0) {
                        resultsList.html('<p>No results.</p>');
                        resultsList.fadeIn(200);
                        resultsList.hide();
                    } else {
                        $.each(data.results, function(index, item) {
                            var link = $('<a></a>').attr('href', item.url);
                            link.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
                            link.append('<span class="title">' + item.title + '</span>');
                            link.wrap('<div class="large-4 columns"></div>');
                            resultsList.append(link.parent());
                        });
                        if (data.results_count > 10) {
                            resultsList.append('<div class="row"><div class="semi-10 large-push-2 semi-push-1 large-8 columns"><a class="btn" href="' + searchURL + '"> +(' + data.results_count + ') more</a></div></div>');
                        }
                        resultsList.fadeIn(200);
                    }
                });
            }
        });
    });
    // Clicking outside makes the results disappear.
    //    $('body').bind('click', function(){
    //      $('.search-results').hide();
    //    });
});

search-form.liquid

<div class="search-box search-elem">
	<button class="close"></button>
		<div class="inner row">
			<div class="semi-10 large-push-2 semi-push-1 large-8 columns">
				<h3>SEARCH</h3>
				{% assign searchterm = search.terms | escape | replace: '*', '' | replace: 'title:','' %}
				<form action="/search" method="get" role="search">
					<input type="text" name="q" id="search-field" value="{{searchterm}}" placeholder="Enter search term">
					<button class="submit" type="submit">SEARCH</button>
				</form>
			</div>
			<div class="semi-10 large-push-2 semi-push-1 large-8 columns search-results"></div>
		</div>
	</div>
</div>

search.json.liquid

{% layout none %}
{% capture results %}
  {% for item in search.results %}
    {% assign product = item %}
    { 
      "title"    : {{ product.title | json }},
      "url"      : {{ product.url | within: product.collections.last | json }},
      "thumbnail": {{ product.featured_image.src | product_img_url: 'thumb' | json }}
    }
    {% unless forloop.last %},{% endunless %}
  {% endfor %}
{% endcapture %}
{
  "results_count": {{ search.results_count }},
  "results": [{{ results }}]
}

Any explanation for it?

Any explanation for it?

Thinking the same!

Any explanation for it?

Reproduced it here: https://gist.github.com/atikju/0c0f3c52174f6e75809d6a86490a7da1

Hope it helps!

I think not to need explanation very easy to understand

Hey guys - I'm using the shopify buy button on a squarespace website to create a small shop section (yeah I'm a noob). I wanted to add a search functionality and stumbled upon this thread. I tried my hands on it but couldn't crack it. Can this js be embeded and work as a search form? Can you please guide me?