ambari-web/app/views/common/chosen_plugin.js

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

App.JqueryChosenView = Em.View.extend({
  templateName: require('templates/common/chosen_plugin'),
  tagName: 'select',
  // This needs to be binded from template
  elementId: '',
  title: '',
  options: [],
  /**
   * @name: selectionObj {Object}
   *  Object =   {
   *    placeholder_text: {String}
   *    no_results_text: {String}
   *    nChangeCallback: {Function}
   *  }
   */
  selectionObj: {},

  didInsertElement: function () {
    var self = this;
    var elementId = "#" + self.get("elementId");
    $(elementId).chosen({
      search_contains: true,
      placeholder_text: self.get('selectionObj.placeholder_text'),
      no_results_text: self.get('selectionObj.no_results_text')
    }).change(self.get('selectionObj.onChangeCallback'));

    // Expand the dropdown to accommodate the largest option on mouseenter event
    // and reset it to the original fixed width on the mouseleave event
    Em.run.later(this, function() {
      var chosenDropDownId = elementId + '_chosen' + ' .chosen-drop';
      var chosenDropDownEl;
      $(chosenDropDownId)
        .each(function() {
          chosenDropDownEl = $(this);
          chosenDropDownEl.data("origWidth", chosenDropDownEl.outerWidth());
        })
        .mouseenter(function(){
          $(this).css("width", "auto");
        })
        .mouseleave(function(){
          chosenDropDownEl = $(this);
          chosenDropDownEl.css("width", chosenDropDownEl.data("origWidth"));
        });
    }, 1000);
  }
});