Merge pull request harvesthq#2362 from panmari/max_shown_results

Added option max_shown_results

Author: tjschuck

coffee/lib/abstract-chosen.coffee

@@ -32,6 +32,7 @@ class AbstractChosen
     @display_selected_options = if @options.display_selected_options? then @options.display_selected_options else true
     @display_disabled_options = if @options.display_disabled_options? then @options.display_disabled_options else true
     @include_group_label_in_selected = @options.include_group_label_in_selected || false
+    @max_shown_results = @options.max_shown_results || Number.POSITIVE_INFINITY
 
   set_default_text: ->
     if @form_field.getAttribute("data-placeholder")
@@ -65,11 +66,16 @@ class AbstractChosen
 
   results_option_build: (options) ->
     content = ''
+    shown_results = 0
     for data in @results_data
+      data_content = ''
       if data.group
-        content += this.result_add_group data
+        data_content = this.result_add_group data
       else
-        content += this.result_add_option data
+        data_content = this.result_add_option data
+      if data_content != ''
+        shown_results++
+        content += data_content
 
       # this select logic pins on an awkward flag
       # we can make it better
@@ -79,6 +85,9 @@ class AbstractChosen
         else if data.selected and not @is_multiple
           this.single_set_selected_text(this.choice_label(data))
 
+      if shown_results >= @max_shown_results
+        break
+
     content
 
   result_add_option: (option) ->

public/options.html

@@ -116,6 +116,13 @@ <h3>Example:</h3>
             <p>By default, Chosen only shows the text of a selected option. Setting this option to <code class="language-javascript">true</code> will show the text and group (if any) of the selected option.</p>
           </td>
         </tr>
+        <tr>
+          <td>max_shown_results</td>
+          <td>Infinity</td>
+          <td>
+            <p>Only show the first (n) matching options in the results. This can be used to increase performance for selects with very many options.</p>
+          </td>
+        </tr>
       </table>
 
       <h2><a name="attributes" class="anchor" href="#attributes">Attributes</a></h2>

spec/jquery/max_shown_results.spec.coffee

@@ -0,0 +1,64 @@
+describe "search", ->
+  it "should display only matching items when entering a search term", ->
+    tmpl = "
+          <select data-placeholder='Choose a Country...'>
+            <option value=''></option>
+            <option value='United States'>United States</option>
+            <option value='United Kingdom'>United Kingdom</option>
+            <option value='Afghanistan'>Afghanistan</option>
+          </select>
+        "
+    div = $("<div>").html(tmpl)
+    select = div.find("select")
+    select.chosen()
+
+    container = div.find(".chosen-container")
+    container.trigger("mousedown") # open the drop
+    # Expect all results to be shown
+    results = div.find(".active-result")
+    expect(results.size()).toBe(3)
+
+    # Enter some text in the search field.
+    search_field = div.find(".chosen-search input").first()
+    search_field.val("Afgh")
+    search_field.trigger('keyup')
+
+    # Expect to only have one result: 'Afghanistan'.
+    results = div.find(".active-result")
+    expect(results.size()).toBe(1)
+    expect(results.first().text()).toBe "Afghanistan"
+
+  it "should only show max_shown_results items in results", ->
+    tmpl = "
+          <select data-placeholder='Choose a Country...'>
+            <option value=''></option>
+            <option value='United States'>United States</option>
+            <option value='United Kingdom'>United Kingdom</option>
+            <option value='Afghanistan'>Afghanistan</option>
+          </select>
+        "
+    div = $("<div>").html(tmpl)
+    select = div.find("select")
+    select.chosen({max_shown_results: 1 })
+
+    container = div.find(".chosen-container")
+    container.trigger("mousedown") # open the drop
+    results = div.find(".active-result")
+    expect(results.size()).toBe(1)
+
+    # Enter some text in the search field.
+    search_field = div.find(".chosen-search input").first()
+    search_field.val("United")
+    search_field.trigger("keyup")
+
+    # Showing only one result: the one that occurs first.
+    results = div.find(".active-result")
+    expect(results.size()).toBe(1)
+    expect(results.first().text()).toBe "United States"
+
+    # Showing still only one result, but not the first one.
+    search_field.val("United Ki")
+    search_field.trigger("keyup")
+    results = div.find(".active-result")
+    expect(results.size()).toBe(1)
+    expect(results.first().text()).toBe "United Kingdom"