[Resolved] Limit number of options visible in search dropdown box (taxonomy) & scroll list

[Author]

Posts

[bartB]

I have a view that allows users to search for listings by location (taxonomy). The list is large so I only want the dropdown box to show 4 options at a time but allow the user to scroll through all available choices (or type "F" to jump to "FL-Orlando"

I've tried everything I could find. The closest I've gotten is using the following code from:
https://stackoverflow.com/questions/8788245/how-can-i-limit-the-visible-options-in-an-html-select-dropdown

<select name="select1" onmousedown="if(this.options.length>3){this.size=3;}" onchange='this.size=0;' onblur="this.size=0;">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
</select>

The code works and renders what I want with the dummy information listed. I can't find a way to fit:
[wpv-control-post-taxonomy taxonomy="market" type="select" url_param="wpv-market"]
into the code so that it picks up my taxonomy values (NY-Buffalo)

My site is hidden link

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - do you mean that you are adding taxonomy filter using views as dropdown select and you want to change it to select2 (auto-suggest) list?

If yes:
could you please share access details so I can check what I can do there.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - what if you try to add following code to your current theme's functions.php file:

function enqueue_chosen_jquery() {
    wp_register_style( 'custom_chosencss', '<em><u>hidden link</u></em>', false, '1.1.0', 'all' );
    wp_register_script( 'custom_chosenjs', '<em><u>hidden link</u></em>', array( 'jquery' ), '1.1.0', true );
    wp_enqueue_style( 'custom_chosencss' );
    wp_enqueue_script( 'custom_chosenjs' );
    }
add_action( 'wp_enqueue_scripts', 'enqueue_chosen_jquery' );

And I already added following code to your view's filter JS section:

jQuery(document).ready(function($){
   $(".chosen-select").chosen({
    no_results_text: "No items found!",
    max_selected_options: 5
   });
});

Could you please try and check how it goes.

[bartB]

That definitely limits the vertical size of the box but it stays "open" with 10 options visible after a selection is made (see pic). How do I reduce the box back to its original size (1 line) after a selection is made?

Thanks!! This is so much better than what it was showing before!

[Minesh]

Could you please check now: hidden link

We implemented the chosen select - so it will allow you to type in the text box and it will auto-suggest the related options.

[bartB]

That's exactly what I needed. Expectation exceeded!

My issue is resolved now. Thank you 🙂