Files which have the market drop down

dropdown.js

!function ($) {

    var Dropdown = function () {
    };

    Dropdown.prototype = {

        constructor: Dropdown,

        show: function (e) {
            clearMenus();

            var dropdown = $(this).closest(".dropdown"),
                menu = $(".dropdown-menu", dropdown),
                menuArrow = $(".dropdown-menu-arrow", dropdown),
                items = $("a", menu);

            var dropdownInput = $(".dropdown-input", dropdown);
            if (dropdownInput.length) {
                var inputValue = dropdownInput.val();

                dropdown.dropdown("type");

                setTimeout(function () {
                    dropdownInput.focus();
                    //Move cursor to the end
                    dropdownInput.val('');
                    dropdownInput.val(inputValue);
                }, 100);
            }

            menuArrow.slideDown(200);
            menu.slideDown(200, function () {
                dropdown.addClass("open");
                dropdown.removeClass("processing");
                dropdown.trigger("shown");
            });
        },

        hide: function (e) {
            var dropdown = $(this).closest(".dropdown"),
                menu = $(".dropdown-menu", dropdown),
                menuArrow = $(".dropdown-menu-arrow", dropdown);

            if (dropdown.hasClass("open")) {
                menuArrow.fadeOut(300);
                menu.fadeOut(300, function () {
                    dropdown.removeClass("open");
                    dropdown.removeClass("processing");
                    dropdown.trigger("hidden");
                });
            }
        },

        immediatelyHide: function (e) {
            var dropdown = $(this).closest(".dropdown"),
                menu = $(".dropdown-menu", dropdown),
                menuArrow = $(".dropdown-menu-arrow", dropdown);

            menuArrow.hide();
            menu.hide();
            dropdown.removeClass("open");
            dropdown.removeClass("processing");
            dropdown.trigger("hidden");
        },

        toggle: function (e) {
            e.stopPropagation();
            e.preventDefault();

            if (typeof $.noty !== "undefined" && $.noty !== null && typeof $.noty.closeByInteract === "function") {
                $.noty.closeByInteract();
            }

            var dropdown = $(this).closest(".dropdown");
            if (dropdown.is('.disabled, :disabled')) return;

            dropdown.addClass("processing");
            clearMenus(e);

            if (dropdown.hasClass("open")) {
                dropdown.dropdown("hide");
            } else {
                dropdown.dropdown("show");
            }
        },

        renderSelected: function () {
            var dropdown = $(this).closest(".dropdown"),
                valueContainer = $(".dropdown-value", dropdown),
                isMultiple = dropdown.hasClass("dropdown-select-multiple"),
                isMultipleBlocks = dropdown.hasClass("dropdown-select-multiple-blocks"),
                items = $("a.active", dropdown),
                allItems = $("a.active.all", dropdown);

            if (isMultipleBlocks) {
                valueContainer.html("");

                if (items.length < 1 && allItems.length < 1) {
                    dropdown.removeClass("selected");
                } else {
                    dropdown.addClass("selected");
                }

                if (allItems.length > 0) {
                    items = allItems;
                }

                items.each(function () {
                    var elem = $("<li>" + $(this).text() + "<a class='dropdown-remove' href='#'>&times;</a></li>");
                    elem.data("element", $(this));
                    valueContainer.append(elem);
                });
            }
        },

        select: function (e) {
            e.stopPropagation();

            var dropdown = $(this).closest(".dropdown");
            if (dropdown.is('.disabled, :disabled')) return;

            if (dropdown.hasClass("dropdown-select")) {
                e.preventDefault();

                var isMultiple = dropdown.hasClass("dropdown-select-multiple");

                var items = $("a", dropdown),
                    activeItems = $("a.active", dropdown),
                    singleItems = $("a.single", dropdown),
                    allItems = $("a.all", dropdown),
                    isSingleItem = $(this).hasClass("single"),
                    isAllItem = $(this).hasClass("all"),
                    isActiveItem = $(this).hasClass("active");

                if (isAllItem) {
                    if (isActiveItem) {
                        items.removeClass("active");
                    } else {
                        items.addClass("active");
                    }
                } else {
                    if (!isMultiple || (isMultiple && isSingleItem)) {
                        activeItems.removeClass("active");
                    }
                    singleItems.removeClass("active");
                    $(this).addClass("active");
                    if (isMultiple && isActiveItem) {
                        $(this).removeClass("active");
                    }
                }

                if (!$(this).hasClass("active") && !isAllItem) {
                    allItems.removeClass("active");
                }

                var value = "";
                if (isMultiple) {
                    var tokens = [];
                    $("a.active", dropdown).each(function () {
                        tokens.push($(this).text());
                    });

                    if (isAllItem && $(this).hasClass("active")) {
                        value = $(this).text();
                    } else {
                        value = tokens.join(", ");
                    }
                } else {
                    value = $(this).data('value') || $(this).text();
                }

                if (dropdown.hasClass("dropdown-select-multiple-blocks")) {
                    dropdown.dropdown("renderSelected");
                } else {
                    dropdown.find(".dropdown-value").text(value).val(value);
                }

                if ($("a.active", dropdown).length > 0) {
                    dropdown.addClass("selected");
                } else {
                    dropdown.removeClass("selected");
                }

                if (!isMultiple) {
                    dropdown.dropdown("immediatelyHide");
                }

                dropdown.trigger("select");
            } else {
                dropdown.dropdown("immediatelyHide");
            }
        },

        type: function (e) {
            var dropdown = $(this).closest(".dropdown");
            if (dropdown.is('.disabled, :disabled')) return;

            if (dropdown.hasClass("dropdown-select")) {
                if (typeof(e) != 'undefined') {
                    e.preventDefault();
                    e.stopPropagation();
                }

                var input = dropdown.find(".dropdown-input"),
                    items = dropdown.find("a", dropdown),
                    speededUp = dropdown.hasClass("dropdown-speed");
                if (input.val().length > 0) {
                    var parent = null;
                    items.each(function () {
                        if ($(this).data('parent-id') == null) {
                            parent = $(this);
                        } else if (parent.data('id') != $(this).data('parent-id')) {
                            parent = null;
                        }

                        var pos = $(this).text().toLowerCase().indexOf(input.val().toLowerCase());
                        if (pos === -1) {
                            $(this).data('fits', false);
                            if (speededUp) {
                                $(this).closest('li').hide();
                            } else {
                                $(this).html($(this).text());
                                $(this).hide();
                            }
                        } else {
                            if (speededUp) {
                                $(this).closest('li').show();
                            } else {
                                var mark =
                                    $(this).text().substr(0, pos) +
                                        "<mark>" + $(this).text().substr(pos, input.val().length) + "</mark>" +
                                        $(this).text().substr(pos + input.val().length);
                                $(this).html(mark);
                                $(this).show();
                            }
                            if (parent != null) {
                                parent.show();
                            }
                            $(this).data('fits', true);
                        }
                    });
                } else {
                    if (speededUp) {
                        items.each(function () {
                            $(this).closest('li').hide();
                        });
                        items.hide();

                    } else {
                        items.each(function () {
                            $(this).html($(this).text());
                        });
                        items.show();
                    }
                }
            }
        },

        removeItem: function (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
            $(this).parent().data("element").removeClass("active");
            var dropdown = $(this).closest(".dropdown"),
                items = $("a.active", dropdown);
            if ($(this).parent().data("element").is(".all")) {
                items.removeClass("active");
            }
            dropdown.dropdown("renderSelected");
        }
    };

    function clearMenus(e) {
        if (e == null || $(e.target).closest('.dropdown').length == 0) {
            $(".dropdown").not(".processing").dropdown("hide");
        }
    }

    function clearAndStop(e) {
        e.stopPropagation();
        clearMenus(e);
    }

    function keydown(e) {
        if (e.keyCode === 27) {
            clearMenus(e);
        }
    }


    /* DROPDOWN PLUGIN DEFINITION
     * ========================== */

    $.fn.dropdown = function (option) {
        return this.each(function () {
            var $this = $(this),
                data = $this.data("dropdown");
            if (!data) $this.data("dropdown", (data = new Dropdown()));
            if (typeof option === "string") data[option].call($this);
        })
    };

    $.fn.dropdown.Constructor = Dropdown;


    /* APPLY TO STANDARD DROPDOWN ELEMENTS
     * =================================== */

    $(function () {
        $("html")
            .on("click.dropdown", clearMenus)
            .on("keydown.dropdown", keydown);
        $("body")
            .on("click.dropdown", ".dropdown-toggle", Dropdown.prototype.toggle)
            .on("click.dropdown", ".dropdown-menu li a", Dropdown.prototype.select)
            .on("click.dropdown", ".dropdown-input", function (e) {
                e.stopPropagation();
            })
            .on("keyup.dropdown", ".dropdown-input", Dropdown.prototype.type)
            .on("click.dropdown", ".dropdown-remove", Dropdown.prototype.removeItem);
    })

}(window.jQuery);

searchbar.coffee

class SearchBarView extends Backbone.View
  template: TemplateLookup.lookup "searchBarTemplate"


  events:
    "focusin .search-bar-input": "focusInInput"
    "focusout .search-bar-input": "focusOutInput"
    "keydown .search-bar-input": "keyDownInput"
    "keyup .search-bar-input": "keyUpInput"
    "click .search-bar-button": "clearInput"
    "click .search-bar-input-value": "clickBubble"
    "click .search-bar-input-value-text": "clickBubble"
    "click .search-bar-input-value-remove": "removeSuggestion"
    "select .search-bar-market": "selectMarket"

    "click .search-bar-suggestions-blank-browse": "browse"
    "click .search-bar-suggestions-blank-new-search": "newSearch"


  initialize: ->
    CS.SearchApp.searchModel.on "change:value", @update, @
    CS.SearchApp.searchModel.on "change:query", @silentUpdate, @
    CS.SearchApp.searchModel.on "change:active", @changeActive, @
    CS.SearchApp.appContext.on "change:market", @changeMarket, @

    @resultSuggestionsView = new SearchBarResultSuggestionsView
      model: @model
      collection: new CompStak.Suggestions()
      url: CompStakSearchConfig.SUGGESTIONS_URL
      chooseSuggestionCallback: (property, suggestion) =>
        @searchWithSuggestion(property, suggestion)


  render: ->
    @$el.html @template _.extend @model.toJSON(),
      market: CompStak.appContext.getMarket()

    @$(".search-bar-input-value").hide()

    @$("input[placeholder]").placeholderIE()
    @$('[rel="tooltip"]').tooltip { delay: { show: 1000, hide: 200 } }

    @resultSuggestionsView.render()
    @delegateEvents()


  remove: ->
    @resultSuggestionsView?.remove()
    super


  focusInInput: ->
    @$(".search-bar-input-value").hide()
    @update()


  focusOutInput: ->
    @resultSuggestionsView.hide()
    if @model.get("value").length > 0
      @$(".search-bar-input-value").show()
      @$(".search-bar-input").val @$(".search-bar-input-value-text").text()
      @model.set { value: @$(".search-bar-input-value-text").text() }, { silent: true }
      @$(".search-bar-input-value").show()


  keyDownInput: (e) ->
    switch e.which
      when 13
        e.preventDefault()
        @getSuggestionsView().chooseSelected()
        @$('.search-bar-input').blur()
      when 38
        e.preventDefault()
        @getSuggestionsView().prevSuggestion()
      when 40
        e.preventDefault()
        @getSuggestionsView().nextSuggestion()


  keyUpInput: (e) ->
    @model.set(value: $(e.target).val()) if @model.get("value") != $(e.target).val()


  setCaretPosition: ->
    el = @$(".search-bar-input")[0]
    pos = @$(".search-bar-input").val().length
    if el.createTextRange
      range = el.createTextRange()
      range.move('character', pos)
      range.select()
    else
      if el.selectionStart || el.selectionStart == 0
        el.focus()
        el.setSelectionRange(pos, pos)
      else
        el.focus()


  clickBubble: ->
    @setCaretPosition()


  update: ->
    if @model.get("value").length > 2
      @showResultSuggestions()
      setTimeout (=> @resultSuggestionsView.loadSuggestion @model.get "value"), 100
    else
      @hideResultSuggestions()


  silentUpdate: ->
    query = @model.get "query"
    @model.set { value: query }, { silent: true }
    @$(".search-bar-input-value-text").text query
    @focusOutInput()


  changeActive: ->
    @$(".search-bar-input-value").toggleClass "search-bar-input-value-inactive", [email protected] "active"


  getSuggestionsView: ->
    return @resultSuggestionsView if @resultSuggestionsView.isVisible()


  showResultSuggestions: ->
    @resultSuggestionsView.setPosition().show()


  hideResultSuggestions: ->
    @resultSuggestionsView.hide()


  searchWithSuggestion: (property, suggestion) ->
    CompStak.startProcessing()
    isMyComp = CS.SearchApp.filters.where({property: 'owns', comparison: 'eq', value: 'team'}).length > 0
    p = encodeURIComponent(property)
    q = encodeURIComponent(suggestion)

    if isMyComp
      CS.SearchApp.filters.push new CS.Filter
        property: property
        comparison: 'eq'
        value: suggestion
      CS.SearchApp.filters.trigger('reset')
      CS.SearchApp.searchModel.set query: suggestion
      CS.SearchApp.searchModel.set "active", true
      CS.SearchApp.compListener.renderCompView blank: false
      CS.SearchApp.filtersPanelView.renderFilters()
      CS.stopProcessing()
    else
      CS.SearchApp.filters.reset [], silent: true
      market = CompStak.appContext.getMarket()
      CS.SearchApp.router.navigate "searchByProperty/#{market}/#{p}/#{q}"
      CS.SearchApp.router.searchByProperty(market, property, suggestion)


  selectMarket: ->
    market = @$(".search-bar-market .dropdown-value").text()
    CS.SearchApp.router.navigate "searchByProperty/#{market}", trigger: true


  changeMarket: ->
    market = CS.SearchApp.appContext.getMarket()
    @$(".search-bar-market .dropdown-value").text market

    $(".map-search-option").parents('li').show()


    @model.set "value", ""
    @$(".search-bar-input").val("")
    @$(".search-bar-input-value").hide()


  browse: (e) ->

    #Clear My Comps State
    $('.regular-search-bar').removeClass('applied-mycomps')

    e.preventDefault()
    CS.SearchApp.filters.reset [], silent: true
    market = CS.SearchApp.appContext.getMarket()
    CS.SearchApp.router.navigate "searchByProperty/#{market}"
    CS.SearchApp.router.searchByProperty market


  removeSuggestion: (e) ->
    myComp = CS.SearchApp.filters.findWhere({property: 'owns', comparison: 'eq', value: 'team'})
    console.log(myComp)
    console.log("remove suggesitons")
    if myComp
      CS.SearchApp.filters.reset [myComp]
      CS.SearchApp.searchModel.set query: ""
      CS.SearchApp.compListener.renderCompView blank: false
      CS.SearchApp.filtersPanelView.renderFilters()
      @$(".search-bar-input").val("").focus()
    else
      @newSearch(e)

  newSearch: (e) ->
    e.preventDefault()
    CS.SearchApp.router.navigate ""
    CS.SearchApp.router.initialSearch()
    @$(".search-bar-input").val("").focus()

template.gsp

<script id="searchBarTemplate" type="text/x-handlebars-template">
    {{dropdown 'Market' class='market search-bar-market' selected=market}}

    <div class="input-group search-bar-input-group">
        <button type="button" class="input-group-btn search-bar-button" rel="tooltip" data-original-title="Start a New Search" data-placement="right">
            <span class="icon-search"></span>
        </button>
        <input class="input-group-text search-bar-input" type="text" placeholder="Search..." value="{{value}}">
        <div class="search-bar-input-value">
            <span class="search-bar-input-value-text">{{value}}</span>
            <button type="button" class="search-bar-input-value-remove">x</button>
        </div>
    </div>

    <div class="search-bar-buttons">
        <button type="button" class="search-bar-suggestions-blank-new-search">New Search</button><button type="button" class="search-bar-suggestions-blank-browse">Browse All</button>
    </div>
</script>