March 11, 2015 2298 Views 0 Comment

Jquery Multi-Select and Autocomplete Plugin

SHARE THIS ARTICLE

The world of jQuery is filled with awesome plugins that offer quick access to tons of features every developer needs to make their web projects tick. As a follow up to a post I made over a year ago about how to create your very own autocomplete using PHP and JavaScript I would like to introduce the jQuery Chosen plugin. The plugin is hosted at http://harvesthq.github.io/chosen and is my favourite plugin by far for making Select Boxes complete.

The plugin is able to transform standard select boxes into Multi Select dropdown boxes with Autocomplete capability.

Chosen Plugin

Easy to implement

To use the plugin Download using link above and extract to your project. Next, include the following css and jquery files into your project:


<link rel="stylesheet" href="docsupport/prism.css">
<link rel="stylesheet" href="chosen.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $(".chosen-select").chosen();
</script>

The code above will transform your traditional select boxes with class chosen-select into new awesome select boxes with autocomplete and multiselect features. Chosen has a number of options and attributes that allow you to have full control of your select boxes. Goto http://harvesthq.github.io/chosen/options.html to see a full list of options.

DEMODOWNLOAD