Autocomplete template

contextAutocomplete.js

// Uses AMD or browser globals to create a jQuery plugin.

// It does not try to register in a CommonJS environment since
// jQuery is not likely to run in those environments.
// See jqueryPluginCommonJs.js for that version.

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    // Create the defaults once
    var pluginName = "contextAutocomplete",
        defaults = {
            /*
             *  Need to pass in
             *  1. template or template to be loaded 
             *  2. classes(?)
             *  3. the data to be read (JSON object)
             */
            hiddenField: $('#web-context-id'),
            valueField: $('.js-bo-auto'),
            minLength: 2,
            template: 'contextAutocomplete/contextAutocomplete.tmpl.html',
            templateDirectory: '/assets/v1/blocks/'
        };

    // The actual plugin constructor
    function Plugin(element, options) {
        this.element = element;

        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype = {

        init: function () {
            var $el = this.element;

            this.options.valueField.focus();

            //build the results container
            // load the template
            //templateLoader.loadExtTemplate(this.options.templateDirectory + this.options.template, 'AUTOCOMPLETE_TEMPLATE');
            bo.templates.loader(this.options.templateDirectory + this.options.template, 'AUTOCOMPLETE_TEMPLATE');

            var $element = $(this.element),
                webserviceURL = this.options.webserviceURL,
                webserviceOptions = this.options.webserviceOptions;

            $(document).on('AUTOCOMPLETE_TEMPLATE', function (e) {
                console.log('AUTOCOMPLETE_TEMPLATE');

            });

            // bind breaks ie8, add polyfill
            $(document).on("keyup", this.element, this.callQuery.bind(this));

            $(this.element).on('focus', function (e) {
                $('.js-bo-auto-results').show();
            });

            //$(document).on('click', this.hideAutoContainer.bind(this));
            $(document).on('click', '.js-bo-auto-results__item', this.itemClick.bind(this));

            /*
             *  Utility to hide results
             */
            $(document).mouseup(function (e) {
                var container = $('.js-bo-auto-results');

                // if the target of the click isn't the container...
                // ... nor a descendant of the container
                if (!container.is(e.target) && !$('#web-context-value').is(e.target) && container.has(e.target).length === 0) {
                    container.hide();
                }
            });
        },

        /*
         * Don't search if they've started entering a number
         */
        callQuery: function (e) {
            var theQuery = $(this.element).val(),
                myPromise;
            

            if (theQuery.length >= this.options.minLength && isNaN(theQuery)) {
                $(this.element).addClass('bo-loading');
                myPromise = $.ajax({
                    url: this.options.webserviceURL + '?term=' + theQuery
                });
                myPromise.done(this.templatedResults);
            } else {
                $('.js-bo-auto-results').remove();
            }
        },

        templatedResults: function (data) {
            $('#web-context-value').removeClass('bo-loading');
            $('.js-bo-auto-results').remove();
            var template = kendo.template($('#js-bo-autocomplete-template').html());
            var result = template(data);
            $('#web-context-value').after(result);
        },

        hideAutoContainer: function (e) {
            bo.dev.note('hide');
            console.info(e.target.nodeName);
        },

        itemClick: function (e) {
            var $clickedItem = $(e.target);

            var $el = $(this.element);

            $el.val($clickedItem.data('id'));

            bo.menu.navigate(window.location.pathname);
        }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName,
                new Plugin(this, options));
            }
        });
    };
}));

contextAutocomplete.less

@import "C:\tfs\SAIFCode\Assets2\WebApps\Assets\v1\src\css\bo-variables.less";

@white: #fcfcfc;
@black: #0d0d0d;
@highlight-base-color: @secondary-yellow;
@highlight-background-color: lighten(@highlight-base-color, 32%);
@highlight-background-hover-color: darken(@highlight-background-color, 20%);
@highlight-text-color: darken(@highlight-base-color, 20%);
@highlight-text-hover-color: darken(@highlight-background-hover-color, 20%);
@highlight-gray: greyscale(@highlight-text-color);

.bo-auto-results {
  background-color: @white;
  border: 1px solid lighten(@highlight-gray, 35%);
  box-shadow: 0 0 4px lighten(@highlight-gray, 35%);
  height: auto;
  overflow: auto;
  left: 20px;
  position: absolute;
  top: 38px;
  width: 340px;
  z-index: 99;

  ul {
    list-style-type: none;
    margin:0;
    padding:0;
  }
}

.bo-auto-results--long {
    height: 340px;
}
.bo-auto-results__info {
    color: lighten(@highlight-gray, 20%);
    padding:0.4rem 1rem;
}
.bo-auto-results__item {
  cursor: pointer;
  padding: 0.4rem 1rem;

  &.is-expired:nth-of-type(1) {
      border-top: 1px solid lighten(@highlight-gray, 35%);
  }
}

.autocomplete-key {
    width: 3em;
    display: inline-block;
    margin-right: .5em;
}


.is-active {
		background-color: @highlight-background-color;
}

.is-expired {
    color: @highlight-gray;
}

.is-active,
.is-expired {
	&:hover {
		background-color: @highlight-background-hover-color;
		color: @black;
	}
}

.bo-divider {
    margin-top:1rem;
}

#web-context-value.bo-loading {
    background-repeat:no-repeat;
    background-position: 96%;
    background-size: 16px 16px;
    height: auto;
}

contextAutocomplete.tmpl.html

<script id="js-bo-autocomplete-template" type="text/x-kendo-template">
	# 
	var resultsClass = 'js-bo-auto-results__item bo-auto-results__item', 
		resultsLength = data.length, 
		resultsContainer = 'bo-auto-results js-bo-auto-results',
		activeAgencies = [],
		expiredAgencies = [];

	if(resultsLength > 10) {
		resultsContainer += ' bo-auto-results--long';
		}

	for(var i=0; i < data.length; i++) {
		if(data[i].IsActive == true) {
			activeAgencies.push(data[i]);
		} else {
			expiredAgencies.push(data[i]);
		}
	} 
	#
	
	<div class="#= resultsContainer #">
		<ul class="js-bo-auto-results__list bo-auto-results__list">

		# if(resultsLength == 0) { #
			<li><span class="bo-auto-results__info">There are no results</span></li>
		# } else { #
			# for(var i=0; i < activeAgencies.length; i++) { #
					# resultsClass += ' is-active'; #
					<li class="js-bo-auto-results__item bo-auto-results__item is-active" data-id="#= activeAgencies[i].Id #">
						<span class="autocomplete-key">#= activeAgencies[i].Id #</span> #= activeAgencies[i].Name #
					</li>
				# } #

				<li class="bo-divider"><span class="bo-auto-results__info">Expired Agencies</span>
					<ul class="bo-auto-results__list">
			# for(var j=0; j < expiredAgencies.length; j++) { #					
					# resultsClass += ' is-expired'; #
						<li class="js-bo-auto-results__item bo-auto-results__item is-expired" data-id="#= expiredAgencies[j].Id #">
							<span class="autocomplete-key">#= expiredAgencies[j].Id #</span> #= expiredAgencies[j].Name #
						</li>
				# } #	
					</ul>
				</li>		
		# } #

		</ul>
	</div>

</script>