How to create HTML select box with searching support using jQuery with cakephp

CAKE PHP JAVASCRIPT

Posted on 2016-06-01 02:49:57


In this tutorial I will show you that how to create select box with searching support you can search your desired option rather than finding it by scroll. I have used a jquery plugin select2 to implement this tasks, its very easy and simple to understand it help you to give facility to users if you have large lists to select.

Before use jquery select 2:


After use select2 jquery:


How to use it:

Include jQuery libraries and css

1
2
echo $this->Html->css('admin/select2.min.css');
echo $this->Html->script('select2.min.js');

You can download file js and css select2 at here

jQuery select2 trigger:

 

6
7
8
<script>
        $(document).ready(function() {
            $(".schoolSearch").select2({
                    placeholder: "Select a State",
                    allowClear: true
             });
        });
</script>

In view file.

you need add class "schoolSearch" to select box in cakephp. $schools  is array data.

<?php echo $this->Form->input('school_id', array('options' => $schools, 'label'=>false, 'class'=>'schoolSearch')); ?>

You can use for form select in html:

1
2
3
4
5
6
7
<select class="schoolSearch">
    <option value="AK">school1</option>
    <option value="HI">school2</option>
    ...
    <option value="VA">schooln1</option>
    <option value="WV">schooln2</option>
</select>