Sierra Trading Post: Search Term Counts Retriever

by Adam Patridge

HTML

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<noscript>This demo is written completely in JavaScript. If you don't have it, or have it disabled, it will be far less exciting.</noscript>
<form class="searchCountForm">
    <div>
        <label for="searchNewLines">Search terms (one term per line)</label>
    </div>
    <div>
        <textarea id="searchNewLines"></textarea>
    </div>
    <input type="submit" value="Get Counts"/>
</form>
<div class="progressBar"></div>
<div>
    <table class="results">
        <tr class="header"><th>Term</th><th>Count</th></tr>
    </table>
</div>
<div>
    <div>
        <label for="resultsCsv">CSV output</label>
    </div>
    <div>
        <textarea id="resultsCsv" readonly></textarea>
    </div>
</div>
<a href="#" class="clearResults">Clear Results</a>

<script type="text/x-jquery-tmpl" id="resultTemplate">
    <tr data-term="{{=term}}"><td>{{=term}}</td><td>{{=count}}</td></tr>
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript" src="https://raw.github.com/BorisMoore/jsrender/master/jsrender.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

CSS

table.results td, table.results th { border: 1px solid black; }

JavaScript

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
    var rest = this.slice((to || from) + 1 || this.length);
    this.length = from < 0 ? this.length + from : from;
    return this.push.apply(this, rest);
};
$(function() {
    var apiHost = "apps.sierratradingpost.com",
        // Don't advertise your developer key. This one is heavily throttled and changed if abuse is discovered.
        apiUrl = "/api/1.0/products/search~{term}/",
        $resultsTable = $(".results"),
        $resultsCsv = $("#resultsCsv"),
        resultTemplate = $.template("resultTemplate", $("#resultTemplate")),
        $searchTermsNewLineInput = $("#searchNewLines"),
        dfdGetCount = function(searchTerm) {
            var searchApiUrl = apiUrl.replace("{term}", encodeURIComponent(searchTerm)) + "?perPage=1",
                dfd = $.Deferred();
            $.ajax({
                dataType: "jsonp",
                jsonp: "callback",
                url: "http://" + apiHost + searchApiUrl
            }).done(function(data) {
                dfd.resolve(data.Count);
            }).fail(function() {
                dfd.reject();
            });
            return dfd.promise();
        },
        ResultModel = function(term, count) {
            this.term = term;
            this.count = count;
        },
        addResult = function(resultModel) {
            var resultDisplay = $.render(resultModel, resultTemplate),
                $resultItem = $resultsTable.find("tr[data-term=\"" + resultModel.term + "\"]"),
                existingResultsCsvLines = $resultsCsv.val().trim().split("\n"),
                updatedResultsCsvLines = [];
            if ($resultItem.length > 0) {
                $resultItem.remove();
            }
            $.each(existingResultsCsvLines, function(i, value) {
                if ("" !== value && 0 !== value.indexOf("\"" + resultModel.term + "\"")) {
                    updatedResultsCsvLines.push(value);
        ...