Use multiple select entries with filteration library

Sometimes you need to show & allow user a select box with multiple options to choose from, But sometimes also you need this to be filtered as there may be numerous options to choose from.

To create such a select with multiple select and filteration as well, you can use multi-select libryay

Note: You will need to include two files :

• multiple-select.js


• multiple-select.css

<script src="{{asset('js/multiple-select.js')}}"></script>

<link rel="stylesheet" href="{{asset('css/multiple-select.css')}}">



<script>

    $(theMultiFunction = function () {

        $('select.w300').multipleSelect({

            multiple: true,

            multipleWidth: 100,

            filter: true,

            minimumCountSelected: 3,

            placeholder: 'Choose from the list',

            delimiter: ', ',

            formatSelectAll: () => '[Select all]',

            formatAllSelected: () => 'All has been selected',

            formatCountSelected: () => '# from % Chosen',

            formatNoMatchesFound: () => 'NO results'

        });



        //Some Styling

		$(".ms-drop").css('display', 'none');

		$(".ms-drop").css('maxHeight', '400px');

		$(".ms-drop").css('overflow', 'auto');

		$(".ms-parent").css('width', '100%');

		$(".ms-choice > span").css('textAlign', 'left');

		

	});

</script>

Next, we can add/show the HTML select box as follows: 

<select class="w300 p-0 form-control p-0" multiple="multiple" name="chosenTags[]" id="chosenTags" >													

    @if (isset($tags) AND count($tags))

        @foreach ($tags as $tag)

            <div class="form-check">

                <option value="{{$tag}}">{{$tag}}</option>

            </div>

        @endforeach

    @endif

</select>

That's it, Now you have a drop-down menu field, with multiple options to choose from after you filter the options.

Mohammed Anwar

Experienced technical lead PHP, MySQL and Laravel Developer for 15+ years, with proven ability to develop and create high-quality and optimized web applications. Great ability to build and optimize database design, schema and queries. Versed programing trainer and instructor delivering web courses and helping others to get into the field in a timely manner. Fast and eager learner for new technologies .