How to show a search box inside a list form field

Question

How to show a search box inside a 'list' type of form field?

Answer 1

You need to load chosen plugin to style list box fields like this.

Load chosen plugin first in your form layout file so that it can add style to your select boxes

JHtml::_('formbehavior.chosen', 'select');

Add following class name to your form field (optional if you want to color it as mandatory field)

class="chzn-color-state"

To render the field on your form page:

<div class="control-group">
   <div class="control-label">
      <?php echo $this->form->getLabel('fieldname'); ?>
   </div>
   <div class="controls">
     <?php echo $this->form->getInput('fieldname'); ?>
   </div>
</div>

Note: The search box will be shown inside the listbox if there are 10 or more options inside it. See the below sample jQuery code that will be added by Joomla.

jQuery('select').chosen({"disable_search_threshold":10,

To override it, change your chosen loading code to following:

JHtml::_('formbehavior.chosen', 'select', null, array('disable_search_threshold'=>1));