chosen-rails 1.5.2 → 1.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 53ab8c7f957d30317d0e6081b2c1e2e7fd67846a
-  data.tar.gz: dc31f364d75238af5225017fb87bf85d91273930
+SHA256:
+  metadata.gz: cb9a01d9e95e9334d789999deed11a5f4eeff7f7bf4aded85153ccb90e2cdb60
+  data.tar.gz: e0598c9ee4777bffaee6f134fe1f8d0b01d9bfc2d5e93291f24246d94a7ecabe
 SHA512:
-  metadata.gz: 6dee8a53fa50bba34f37ff6888aa8680854d826e1c63623fdf7d2d2d7becab356460d35912194ac5f4db9377b9d65dc1eb56a01a715b36223b93cbb85e6be418
-  data.tar.gz: f950fbcf9c474463b712defbd0c28319bc24634631f5cd4612b414d53e6b4371a14347366d21d5dc8f523869154cfaf9457f4be6e5aa2181b0f334ce038ea5a6
+  metadata.gz: deff791359ce236e7bcb49d58979c8e57e4732e4feb8b6707359ff93ce4e918a143a7e8010e9a0a346c723bad9364596babb8081e5d97680b1afee2fc0a130ba
+  data.tar.gz: '0832921699aa80ee2771bc75074e651261587f620aa6a70118208e5035cbe8f567d4bae95e4006587a52e3a0964e0eb7ce758414453634332b1c35cfc83eeb4e'

data/README.md

@@ -2,22 +2,24 @@
 
 [Chosen](https://github.com/harvesthq/chosen) is a library for making long, unwieldy select boxes more user friendly.
 
-The `chosen-rails` gem integrates the `Chosen` with the Rails asset pipeline.
+The `chosen-rails` gem integrates the `Chosen` into Rails asset pipeline with the [sprockets-rails](https://github.com/rails/sprockets-rails).
 
 ## Usage
 
 ### Install chosen-rails gem
 
-Include `chosen-rails` in Gemefile
+Include `chosen-rails` in Gemfile
 
 ```rb
-gem 'compass-rails'
+gem 'jquery-rails'
 gem 'chosen-rails'
 ```
 
 Then run `bundle install`
 
-You need to add `compass-rails` manually since it is not a dependency from version 1.5.1.
+### About JQuery
+
+You can get jquery via [jquery-rails](https://github.com/rails/jquery-rails).
 
 Please consider [jquery-turbolinks](https://github.com/kossnocorp/jquery.turbolinks) if you have turbolinks issues for Rails 4 +.
 
@@ -26,12 +28,14 @@ Please consider [jquery-turbolinks](https://github.com/kossnocorp/jquery.turboli
 Add to your `app/assets/javascripts/application.js` if use with jQuery
 
 ```coffee
+//= require jquery
 //= require chosen-jquery
 ```
 
 Or with Prototype
 
 ```coffee
+//= require jquery
 //= require chosen-prototype
 ```
 
@@ -39,18 +43,18 @@ Or with Prototype
 
 Add to your `app/assets/stylesheets/application.css`
 
-```scss
-*= require chosen-compass
-```
-
-or without `compass-rails`
-
 ```scss
 *= require chosen
 ```
 
 ### Enable chosen javascript by specific css class
 
+For rails 6, remember to add `javascript_include_tag` in `app/views/layouts/application.html.erb`, like
+
+```ruby
+<%= javascript_include_tag 'application' %>
+```
+
 Add to one coffee script file, like `scaffold.js.coffee`
 
 ```coffee

data/Rakefile

@@ -9,7 +9,7 @@ task 'update-chosen', 'repository_url', 'branch' do |task, args|
   files = SourceFile.new
   files.fetch remote, branch
   files.eject_javascript_class_from_closure
-  files.remove_compass_lines
   files.add_depend_on_asset
+  files.change_url_to_image_url
   files.cleanup
 end

data/chosen-rails.gemspec

@@ -18,7 +18,7 @@ Gem::Specification.new do |gem|
 
   gem.add_dependency 'railties', '>= 3.0'
   gem.add_dependency 'coffee-rails', '>= 3.2'
-  gem.add_dependency 'sass-rails', '>= 3.2'
+  gem.add_dependency 'sassc-rails', '>= 2.1.2'
 
   gem.add_development_dependency 'bundler', '>= 1.0'
   gem.add_development_dependency 'rails', '>= 3.0'

data/lib/chosen-rails/rspec.rb

@@ -34,22 +34,22 @@ module Chosen
       def chosen_find_container(from, options)
         from = from.to_s
 
-        id = from
+        id = from.underscore
         id = "##{id}" unless from.start_with?('#')
         id = "#{id}_chosen" unless from.end_with?('_chosen')
 
-        find(:css, id, options)
+        find(:css, id, **options)
       rescue Capybara::ElementNotFound
-        label = find('label', { text: from }.merge(options))
+        label = find('label', **{ text: from }.merge(options))
 
-        find(:css, "##{label[:for]}_chosen", options)
+        find(:css, "##{label[:for].underscore}_chosen", **options)
       end
 
       def chosen_find_input(from, options)
         from = from.to_s
         from = "##{from}" unless from.start_with?('#')
 
-        find(:css, from, options)
+        find(:css, from.underscore, **options)
       end
 
       def chosen_multiselect?(input)
@@ -63,7 +63,7 @@ module Chosen
           input.click
 
           within "##{input[:id]} .chosen-drop .chosen-results" do
-            result = find('.active-result', text: item)
+            result = find('.active-result', text: item, match: :prefer_exact)
 
             result.click if result.visible?
           end
@@ -88,5 +88,6 @@ module Chosen
 end
 
 RSpec.configure do |config|
+  config.include Chosen::Rspec::FeatureHelpers, type: :system
   config.include Chosen::Rspec::FeatureHelpers, type: :feature
 end

data/lib/chosen-rails/source_file.rb

@@ -31,14 +31,6 @@ class SourceFile < Thor
     end
   end
 
-  desc 'remove compass lines', 'remove compass lines'
-  def remove_compass_lines
-    self.destination_root = 'vendor/assets'
-    gsub_file 'stylesheets/chosen-base.scss', /^\s*\@include.*\n/, ''
-    gsub_file 'stylesheets/chosen-base.scss', /^\@import.*\n/, ''
-    # gsub_file 'stylesheets/chosen-base.scss', /\n(\$chosen-sprite:)/, '\1'
-  end
-
   desc 'add depend_on_asset', 'add depend_on_asset'
   def add_depend_on_asset
     self.destination_root = 'vendor/assets'
@@ -49,6 +41,12 @@ class SourceFile < Thor
     prepend_to_file 'stylesheets/chosen-base.scss', scss
   end
 
+  desc 'change url to image url', 'change url to image url'
+  def change_url_to_image_url
+    self.destination_root = 'vendor/assets'
+    gsub_file 'stylesheets/chosen-base.scss', /url/, 'image-url'
+  end
+
   desc 'clean up useless files', 'clean up useless files'
   def cleanup
     self.destination_root = 'vendor/assets'

data/lib/chosen-rails/version.rb

@@ -1,6 +1,6 @@
 module Chosen
   module Rails
-    VERSION = '1.5.2'
-    CHOSEN_VERSION = '1.5.1'
+    VERSION = '1.10.0'
+    CHOSEN_VERSION = '1.8.7'
   end
 end

data/lib/chosen-rails.rb

@@ -6,7 +6,7 @@ module Chosen
 end
 
 case ::Rails.version.to_s
-when /^(4|5)/
+when /^(4|5|6|7)/
   require 'chosen-rails/engine'
 when /^3\.[12]/
   require 'chosen-rails/engine3'

data/vendor/assets/javascripts/chosen.jquery.coffee

@@ -24,7 +24,6 @@ class Chosen extends AbstractChosen
   setup: ->
     @form_field_jq = $ @form_field
     @current_selectedIndex = @form_field.selectedIndex
-    @is_rtl = @form_field_jq.hasClass "chosen-rtl"
 
   set_up_html: ->
     container_classes = ["chosen-container"]
@@ -34,17 +33,19 @@ class Chosen extends AbstractChosen
 
     container_props =
       'class': container_classes.join ' '
-      'style': "width: #{this.container_width()};"
       'title': @form_field.title
 
     container_props.id = @form_field.id.replace(/[^\w]/g, '_') + "_chosen" if @form_field.id.length
 
     @container = ($ "<div />", container_props)
 
+    # CSP without 'unsafe-inline' doesn't allow setting the style attribute directly
+    @container.width this.container_width()
+
     if @is_multiple
-      @container.html '<ul class="chosen-choices"><li class="search-field"><input type="text" value="' + @default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>'
+      @container.html this.get_multi_html()
     else
-      @container.html '<a class="chosen-single chosen-default"><span>' + @default_text + '</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" /></div><ul class="chosen-results"></ul></div>'
+      @container.html this.get_single_html()
 
     @form_field_jq.hide().after @container
     @dropdown = @container.find('div.chosen-drop').first()
@@ -70,42 +71,44 @@ class Chosen extends AbstractChosen
     @form_field_jq.trigger("chosen:ready", {chosen: this})
 
   register_observers: ->
-    @container.bind 'touchstart.chosen', (evt) => this.container_mousedown(evt); evt.preventDefault()
-    @container.bind 'touchend.chosen', (evt) => this.container_mouseup(evt); evt.preventDefault()
-
-    @container.bind 'mousedown.chosen', (evt) => this.container_mousedown(evt); return
-    @container.bind 'mouseup.chosen', (evt) => this.container_mouseup(evt); return
-    @container.bind 'mouseenter.chosen', (evt) => this.mouse_enter(evt); return
-    @container.bind 'mouseleave.chosen', (evt) => this.mouse_leave(evt); return
-
-    @search_results.bind 'mouseup.chosen', (evt) => this.search_results_mouseup(evt); return
-    @search_results.bind 'mouseover.chosen', (evt) => this.search_results_mouseover(evt); return
-    @search_results.bind 'mouseout.chosen', (evt) => this.search_results_mouseout(evt); return
-    @search_results.bind 'mousewheel.chosen DOMMouseScroll.chosen', (evt) => this.search_results_mousewheel(evt); return
-
-    @search_results.bind 'touchstart.chosen', (evt) => this.search_results_touchstart(evt); return
-    @search_results.bind 'touchmove.chosen', (evt) => this.search_results_touchmove(evt); return
-    @search_results.bind 'touchend.chosen', (evt) => this.search_results_touchend(evt); return
-
-    @form_field_jq.bind "chosen:updated.chosen", (evt) => this.results_update_field(evt); return
-    @form_field_jq.bind "chosen:activate.chosen", (evt) => this.activate_field(evt); return
-    @form_field_jq.bind "chosen:open.chosen", (evt) => this.container_mousedown(evt); return
-    @form_field_jq.bind "chosen:close.chosen", (evt) => this.input_blur(evt); return
-
-    @search_field.bind 'blur.chosen', (evt) => this.input_blur(evt); return
-    @search_field.bind 'keyup.chosen', (evt) => this.keyup_checker(evt); return
-    @search_field.bind 'keydown.chosen', (evt) => this.keydown_checker(evt); return
-    @search_field.bind 'focus.chosen', (evt) => this.input_focus(evt); return
-    @search_field.bind 'cut.chosen', (evt) => this.clipboard_event_checker(evt); return
-    @search_field.bind 'paste.chosen', (evt) => this.clipboard_event_checker(evt); return
+    @container.on 'touchstart.chosen', (evt) => this.container_mousedown(evt); return
+    @container.on 'touchend.chosen', (evt) => this.container_mouseup(evt); return
+
+    @container.on 'mousedown.chosen', (evt) => this.container_mousedown(evt); return
+    @container.on 'mouseup.chosen', (evt) => this.container_mouseup(evt); return
+    @container.on 'mouseenter.chosen', (evt) => this.mouse_enter(evt); return
+    @container.on 'mouseleave.chosen', (evt) => this.mouse_leave(evt); return
+
+    @search_results.on 'mouseup.chosen', (evt) => this.search_results_mouseup(evt); return
+    @search_results.on 'mouseover.chosen', (evt) => this.search_results_mouseover(evt); return
+    @search_results.on 'mouseout.chosen', (evt) => this.search_results_mouseout(evt); return
+    @search_results.on 'mousewheel.chosen DOMMouseScroll.chosen', (evt) => this.search_results_mousewheel(evt); return
+
+    @search_results.on 'touchstart.chosen', (evt) => this.search_results_touchstart(evt); return
+    @search_results.on 'touchmove.chosen', (evt) => this.search_results_touchmove(evt); return
+    @search_results.on 'touchend.chosen', (evt) => this.search_results_touchend(evt); return
+
+    @form_field_jq.on "chosen:updated.chosen", (evt) => this.results_update_field(evt); return
+    @form_field_jq.on "chosen:activate.chosen", (evt) => this.activate_field(evt); return
+    @form_field_jq.on "chosen:open.chosen", (evt) => this.container_mousedown(evt); return
+    @form_field_jq.on "chosen:close.chosen", (evt) => this.close_field(evt); return
+
+    @search_field.on 'blur.chosen', (evt) => this.input_blur(evt); return
+    @search_field.on 'keyup.chosen', (evt) => this.keyup_checker(evt); return
+    @search_field.on 'keydown.chosen', (evt) => this.keydown_checker(evt); return
+    @search_field.on 'focus.chosen', (evt) => this.input_focus(evt); return
+    @search_field.on 'cut.chosen', (evt) => this.clipboard_event_checker(evt); return
+    @search_field.on 'paste.chosen', (evt) => this.clipboard_event_checker(evt); return
 
     if @is_multiple
-      @search_choices.bind 'click.chosen', (evt) => this.choices_click(evt); return
+      @search_choices.on 'click.chosen', (evt) => this.choices_click(evt); return
     else
-      @container.bind 'click.chosen', (evt) -> evt.preventDefault(); return # gobble click of anchor
+      @container.on 'click.chosen', (evt) -> evt.preventDefault(); return # gobble click of anchor
 
   destroy: ->
-    $(@container[0].ownerDocument).unbind "click.chosen", @click_test_action
+    $(@container[0].ownerDocument).off 'click.chosen', @click_test_action
+    @form_field_label.off 'click.chosen' if @form_field_label.length > 0
+
     if @search_field[0].tabIndex
       @form_field_jq[0].tabIndex = @search_field[0].tabIndex
 
@@ -114,32 +117,35 @@ class Chosen extends AbstractChosen
     @form_field_jq.show()
 
   search_field_disabled: ->
-    @is_disabled = @form_field_jq[0].disabled
-    if(@is_disabled)
-      @container.addClass 'chosen-disabled'
-      @search_field[0].disabled = true
-      @selected_item.unbind "focus.chosen", @activate_action if !@is_multiple
+    @is_disabled = @form_field.disabled || @form_field_jq.parents('fieldset').is(':disabled')
+
+    @container.toggleClass 'chosen-disabled', @is_disabled
+    @search_field[0].disabled = @is_disabled
+
+    unless @is_multiple
+      @selected_item.off 'focus.chosen', this.activate_field
+
+    if @is_disabled
       this.close_field()
-    else
-      @container.removeClass 'chosen-disabled'
-      @search_field[0].disabled = false
-      @selected_item.bind "focus.chosen", @activate_action if !@is_multiple
+    else unless @is_multiple
+      @selected_item.on 'focus.chosen', this.activate_field
 
   container_mousedown: (evt) ->
-    if !@is_disabled
-      if evt and evt.type is "mousedown" and not @results_showing
-        evt.preventDefault()
+    return if @is_disabled
 
-      if not (evt? and ($ evt.target).hasClass "search-choice-close")
-        if not @active_field
-          @search_field.val "" if @is_multiple
-          $(@container[0].ownerDocument).bind 'click.chosen', @click_test_action
-          this.results_show()
-        else if not @is_multiple and evt and (($(evt.target)[0] == @selected_item[0]) || $(evt.target).parents("a.chosen-single").length)
-          evt.preventDefault()
-          this.results_toggle()
+    if evt and evt.type in ['mousedown', 'touchstart'] and not @results_showing
+      evt.preventDefault()
+
+    if not (evt? and ($ evt.target).hasClass "search-choice-close")
+      if not @active_field
+        @search_field.val "" if @is_multiple
+        $(@container[0].ownerDocument).on 'click.chosen', @click_test_action
+        this.results_show()
+      else if not @is_multiple and evt and (($(evt.target)[0] == @selected_item[0]) || $(evt.target).parents("a.chosen-single").length)
+        evt.preventDefault()
+        this.results_toggle()
 
-        this.activate_field()
+      this.activate_field()
 
   container_mouseup: (evt) ->
     this.results_reset(evt) if evt.target.nodeName is "ABBR" and not @is_disabled
@@ -155,7 +161,7 @@ class Chosen extends AbstractChosen
     this.close_field() if not @active_field and @container.hasClass "chosen-container-active"
 
   close_field: ->
-    $(@container[0].ownerDocument).unbind "click.chosen", @click_test_action
+    $(@container[0].ownerDocument).off "click.chosen", @click_test_action
 
     @active_field = false
     this.results_hide()
@@ -165,8 +171,11 @@ class Chosen extends AbstractChosen
 
     this.show_search_field_default()
     this.search_field_scale()
+    @search_field.blur()
 
   activate_field: ->
+    return if @is_disabled
+
     @container.addClass "chosen-container-active"
     @active_field = true
 
@@ -189,7 +198,7 @@ class Chosen extends AbstractChosen
 
     if @is_multiple
       @search_choices.find("li.search-choice").remove()
-    else if not @is_multiple
+    else
       this.single_set_selected_text()
       if @disable_search or @form_field.options.length <= @disable_search_threshold
         @search_field[0].readOnly = true
@@ -238,7 +247,7 @@ class Chosen extends AbstractChosen
     @results_showing = true
 
     @search_field.focus()
-    @search_field.val @search_field.val()
+    @search_field.val this.get_search_field_value()
 
     this.winnow_results()
     @form_field_jq.trigger("chosen:showing_dropdown", {chosen: this})
@@ -268,7 +277,7 @@ class Chosen extends AbstractChosen
       @form_field_label = $("label[for='#{@form_field.id}']") #next check for a for=#{id}
 
     if @form_field_label.length > 0
-      @form_field_label.bind 'click.chosen', (evt) => if @is_multiple then this.container_mousedown(evt) else this.activate_field()
+      @form_field_label.on 'click.chosen', this.label_click_handler
 
   show_search_field_default: ->
     if @is_multiple and this.choices_count() < 1 and not @active_field
@@ -290,7 +299,7 @@ class Chosen extends AbstractChosen
     this.result_do_highlight( target ) if target
 
   search_results_mouseout: (evt) ->
-    this.result_clear_highlight() if $(evt.target).hasClass "active-result" or $(evt.target).parents('.active-result').first()
+    this.result_clear_highlight() if $(evt.target).hasClass("active-result") or $(evt.target).parents('.active-result').first()
 
   choice_build: (item) ->
     choice = $('<li />', { class: "search-choice" }).html("<span>#{this.choice_label(item)}</span>")
@@ -299,7 +308,7 @@ class Chosen extends AbstractChosen
       choice.addClass 'search-choice-disabled'
     else
       close_link = $('<a />', { class: 'search-choice-close', 'data-option-array-index': item.array_index })
-      close_link.bind 'click.chosen', (evt) => this.choice_destroy_link_click(evt)
+      close_link.on 'click.chosen', (evt) => this.choice_destroy_link_click(evt)
       choice.append close_link
 
     @search_container.before  choice
@@ -311,9 +320,12 @@ class Chosen extends AbstractChosen
 
   choice_destroy: (link) ->
     if this.result_deselect( link[0].getAttribute("data-option-array-index") )
-      this.show_search_field_default()
+      if @active_field
+        @search_field.focus()
+      else
+        this.show_search_field_default()
 
-      this.results_hide() if @is_multiple and this.choices_count() > 0 and @search_field.val().length < 1
+      this.results_hide() if @is_multiple and this.choices_count() > 0 and this.get_search_field_value().length < 1
 
       link.parents('li').first().remove()
 
@@ -325,7 +337,7 @@ class Chosen extends AbstractChosen
     this.single_set_selected_text()
     this.show_search_field_default()
     this.results_reset_cleanup()
-    @form_field_jq.trigger "change"
+    this.trigger_form_field_change()
     this.results_hide() if @active_field
 
   results_reset_cleanup: ->
@@ -360,10 +372,17 @@ class Chosen extends AbstractChosen
       else
         this.single_set_selected_text(this.choice_label(item))
 
-      this.results_hide() unless (evt.metaKey or evt.ctrlKey) and @is_multiple
-      this.show_search_field_default()
+      if @is_multiple && (!@hide_results_on_select || (evt.metaKey or evt.ctrlKey))
+        if evt.metaKey or evt.ctrlKey
+          this.winnow_results(skip_highlight: true)
+        else
+          @search_field.val("")
+          this.winnow_results()
+      else
+        this.results_hide()
+        this.show_search_field_default()
 
-      @form_field_jq.trigger "change", {'selected': @form_field.options[item.options_index].value} if @is_multiple || @form_field.selectedIndex != @current_selectedIndex
+      this.trigger_form_field_change selected: @form_field.options[item.options_index].value  if @is_multiple || @form_field.selectedIndex != @current_selectedIndex
       @current_selectedIndex = @form_field.selectedIndex
 
       evt.preventDefault()
@@ -391,7 +410,7 @@ class Chosen extends AbstractChosen
       this.result_clear_highlight()
       this.winnow_results() if @results_showing
 
-      @form_field_jq.trigger "change", {deselected: @form_field.options[result_data.options_index].value}
+      this.trigger_form_field_change deselected: @form_field.options[result_data.options_index].value
       this.search_field_scale()
 
       return true
@@ -403,8 +422,14 @@ class Chosen extends AbstractChosen
     @selected_item.find("span").first().after "<abbr class=\"search-choice-close\"></abbr>" unless @selected_item.find("abbr").length
     @selected_item.addClass("chosen-single-with-deselect")
 
+  get_search_field_value: ->
+    @search_field.val()
+
   get_search_text: ->
-    $('<div/>').text($.trim(@search_field.val())).html()
+    $.trim this.get_search_field_value()
+
+  escape_html: (text) ->
+    $('<div/>').text(text).html()
 
   winnow_results_set_highlight: ->
     selected_results = if not @is_multiple then @search_results.find(".result-selected.active-result") else []
@@ -413,9 +438,7 @@ class Chosen extends AbstractChosen
     this.result_do_highlight do_high if do_high?
 
   no_results: (terms) ->
-    no_results_html = $('<li class="no-results">' + @results_none_found + ' "<span></span>"</li>')
-    no_results_html.find("span").first().html(terms)
-
+    no_results_html = this.get_no_results_html(terms)
     @search_results.append no_results_html
     @form_field_jq.trigger("chosen:no_results", {chosen:this})
 
@@ -458,56 +481,33 @@ class Chosen extends AbstractChosen
     @pending_backstroke.removeClass "search-choice-focus" if @pending_backstroke
     @pending_backstroke = null
 
-  keydown_checker: (evt) ->
-    stroke = evt.which ? evt.keyCode
-    this.search_field_scale()
-
-    this.clear_backstroke() if stroke != 8 and this.pending_backstroke
-
-    switch stroke
-      when 8
-        @backstroke_length = this.search_field.val().length
-        break
-      when 9
-        this.result_select(evt) if this.results_showing and not @is_multiple
-        @mouse_on_container = false
-        break
-      when 13
-        evt.preventDefault() if this.results_showing
-        break
-      when 32
-        evt.preventDefault() if @disable_search
-        break
-      when 38
-        evt.preventDefault()
-        this.keyup_arrow()
-        break
-      when 40
-        evt.preventDefault()
-        this.keydown_arrow()
-        break
-
   search_field_scale: ->
-    if @is_multiple
-      h = 0
-      w = 0
+    return unless @is_multiple
+
+    style_block =
+      position: 'absolute'
+      left: '-1000px'
+      top: '-1000px'
+      display: 'none'
+      whiteSpace: 'pre'
 
-      style_block = "position:absolute; left: -1000px; top: -1000px; display:none;"
-      styles = ['font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing']
+    styles = ['fontSize', 'fontStyle', 'fontWeight', 'fontFamily', 'lineHeight', 'textTransform', 'letterSpacing']
 
-      for style in styles
-        style_block += style + ":" + @search_field.css(style) + ";"
+    for style in styles
+      style_block[style] = @search_field.css(style)
 
-      div = $('<div />', { 'style' : style_block })
-      div.text @search_field.val()
-      $('body').append div
+    div = $('<div />').css(style_block)
+    div.text this.get_search_field_value()
+    $('body').append div
 
-      w = div.width() + 25
-      div.remove()
+    width = div.width() + 25
+    div.remove()
 
-      f_width = @container.outerWidth()
+    if @container.is(':visible')
+      width = Math.min(@container.outerWidth() - 10, width)
 
-      if( w > f_width - 10 )
-        w = f_width - 10
+    @search_field.width(width)
 
-      @search_field.css({'width': w + 'px'})
+  trigger_form_field_change: (extra) ->
+    @form_field_jq.trigger "input", extra
+    @form_field_jq.trigger "change", extra