A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with custom styles and makes the options filterable using a search field.

Must Read: VueJS Plugin That Provides A Searchable Select List Component

How to make use of it:

Just create an html structure containing a select tag.

<div class="select">
    <select>
        <option value="">Select option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
    </select>
</div>

Then initialize the plugin with the intended element target.

$(function(){
    $('.select').jselect_search({
    		placeholder : '', // custom placeholder for the search input on the select dropdown, default to, `Search here...`
            searchable : true, // default to true, if true, show search box and allow search on items, otherwise if provided is a function then the search input output will be sent to that defined function instead and will not search on the items
    		fillable : false, // if allowed to create new item on the select dropdown upon enter on the search input, default to 
            on_top_edge : function(e){ // if you reach the top edge of the dropdown upon scrolling, this function will be called and the instance of the element will be pass on as argument, default to false

            },
            on_bottom_edge : function(e){ // if you reach the bottom edge of the dropdown upon scrolling, this function will be called and the instance of the element will be pass on as argument, default to false

            },
            on_change : function(e){ // on change event on the items upon selection of an item from the list, this function will trigger passing the instance of the select element, otherwise, on change event will be ignored

            },
            on_active : function(e){ // when dropdown has been activated with return the total instance of the initialized element, default to false

            },
            on_clear_reflect : [], // clear other simblings upon click clear button, simblings must be an array of ids of initialized select search element e.g. ['#el1','#el2', '#el3'], default to empty array
            disable_text_update : false, // dont update the select text upon successfully click on items, default false
            on_created : function(e){ // called after creation of the UI, passing the element instance

            }
    	});
})

Read More – 

Dropdown Menu with Multiple Select and Searching Support | JS Select
Choose a Custom Style Dropdown Made with Vanilla JS | cSelect


See Demo And Download

Official Website(mejuliver): Click Here

This superior jQuery/javascript plugin is developed by mejuliver. For extra Advanced Usage, please go to the official website.

Share