Angular directives for autocomplete and range slider.

directives.js

"use strict";

angular.module('fs.directives', [])
    .directive('rangeSlider', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                var min = parseInt(attrs.min, 10) || 0;
                var max = parseInt(attrs.max, 10) || 100;

                element.slider({
                    range: true,
                    min: min,
                    max: max,
                    values: [
                        parseInt(attrs.start) || min,
                        parseInt(attrs.end) || max
                    ],
                    slide: function(event, ui) {
                        if (attrs.rangeSlider) {
                            scope.$apply(function(self) {
                                self[attrs.rangeSlider](ui.values[0], ui.values[1]);
                            });
                        }
                    },
                    change: function(event, ui) {
                        scope.search();
                    }
                });
            }
        };
    })
    .directive('suggest', function($http) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.autocomplete({
                    source: function(request, response) {
                        $http.post(attrs.suggest, {prefix: '"'+request.term+'"'})
                            .success(function(data) {
                                for (var i = 0, len = data.length; i < len; i++) {
                                    data[i].label = data[i].value + ", " + data[i].state;
                                }
                                response(data);
                            });
                    },
                    select: function(event, ui) {
                        if (attrs.select) {
                            scope.$apply(function(self) {
                                self[attrs.select](ui.item);
                            });
                        }
                    }
                });
            }
        }
    })
    .directive('facetSuggest', function($http) {

        $.widget('custom.catcomplete', $.ui.autocomplete, {
            _renderMenu: function(ul, items) {
                var self = this;
                var currentCategory = "";
                var firstItem = false;

                $.each(items, function(index, item) {
                    if (item.category != currentCategory) {

                        $("<li></li>")
                            .addClass("ui-autocomplete-category sfj-ac-header")
                            .text(item.category)
                            .appendTo(ul);

                        currentCategory = item.category;
                        firstItem = true;
                    }

                    $("<li></li>")
                        .data("item.autocomplete", item)
                        .css("margin-left", "98px")
                        .css("width", "82%")
                        .addClass(firstItem ? "sfj-ac-item sfj-ac-item-first" : "sfj-ac-item")
                        .append("<a>" + item.label + "</a>")
                        .appendTo(ul);

                    if (firstItem) {
                        firstItem = false;
                    }
                });
            }
        });

        return {
            restrict: 'A',
            link: function(scope, element, attrs) {

                function split(val) {
                    return val.split( /,\s*/ );
                }
                function extractLast( term ) {
                    return split(term).pop();
                }

                element.bind("keydown", function( event ) {

                    if ( event.keyCode === $.ui.keyCode.ENTER) {
                        event.preventDefault();

                        if (! $(this).data( "catcomplete" ).menu.active ) {

                            var textValue = this.value;

                            scope.$apply(function(self) {
                                scope.qterms.push({
                                    category:'text',
                                    value: textValue,
                                    label:'text',
                                    field:'text'
                                });
                                scope.search();
                            });
                            this.value = "";
                            element.catcomplete('close');
                        }
                    }
                }).catcomplete({
                    source: function (req, res) {
                        $http.post('/rest/candidate/suggest', {prefix:extractLast(req.term)})
                            .success(function(groups) {
                                var results = [];
                                var i = 0;
                                var j = 0;
                                var groupCount = groups.length;
                                var orderedGroups = [];

                                for (i = 0; i < groupCount; i++) {
                                    switch (groups[i].groupValue) {
                                        case "Skills"    : orderedGroups[2] = groups[i]; break;
                                        case "Companies" : orderedGroups[1] = groups[i]; break;
                                        case "Job Titles": orderedGroups[0] = groups[i]; break;
                                        default: break;
                                    }
                                }
                                for (i = 0; i < orderedGroups.length; i++) {
                                    for (j = 0; j < orderedGroups[i].doclist.docs.length; j++) {
                                        results[results.length] = {
                                            value   : orderedGroups[i].doclist.docs[j].value,
                                            category: orderedGroups[i].doclist.docs[j].category,
                                            field   : orderedGroups[i].doclist.docs[j].fieldname
                                        };
                                    }
                                }
                                res(results);
                            });
                    },
                    focus: function() {
                        return false;
                    },
                    select: function(event, ui) {
                        scope.$apply(function(self) {
                            scope.qterms.push(ui.item);
                            scope.search();
                        });
                        this.value = "";
                        return false;
                    }
                });
            }
        }
    });