All jQuery UI

20 Impressive jQuery Plugins to Replace the HTML Select Box

The traditional HTML select element is not very powerful out of the box, it lacks in more substantive features. Today, the web demands controls with multiple features for a user-friendly experience and the traditional HTML select box just can’t compete. Features like multi-select, grouping, hierarchical lists, and custom HTML markup make light work of projects and tasks, and the HTML Box lacks these features.
Writing your own implementation for these features will require a lot of effort, and testing browser compatibility can be a nightmare. Luckily, jQuery offers lots of plugins to save you from that hassle. This post has a compiled list of 20 impressive jQuery plugins to replace the traditional HTML select box with a sleek, stylish and feature-rich select box. These jQuery plugins offer various features like changing default styles, adding search functionality, grouping the items, creating hierarchies, keyboard navigation, multiple item selection and many other features.

1. Pretty Dropdowns

Pretty Dropdowns

Pretty Dropdowns is a simple, lightweight jQuery plugin that converts <select> drop-down menus into “pretty” menus that you can skin using CSS. It features:

  • Two arrow styles and sizes to choose from (or add your own style)
  • Easily add icons, thumbnails, and other custom HTML to the menu items
  • Support for multiple-select lists
  • Support for option groups
  • Tooltips (title) carried over at select, option, and optgroup levels
  • Full keyboard navigation (you can even go directly to a menu item by typing its text!)
  • Auto-linked to label (menu will get focus when you click on the label)
  • Accessibility (it plays nicely with screen readers)
  • Sensibility (when you open the menu it does its best to keep the menu items within the viewport)
  • Complete control over the look and feel of the drop-down menu by modifying prettydropdowns.css

2. SelectPick


SelectPick is a fast, simple, customizable, and lightweight jQuery plugin to customize the HTML drop-down box with custom styling. The beauty of this plugin is that it can be applied to any type of HTML, not necessarily just HTML select box. Features include:

  • Possibility to bind to multiple types of HTML elements
  • Customizable data sources
  • Support for Ajax asynchronous access to data
  • Providing options and labelling disable functions
  • Dynamically setting selected items
  • User style customization

3. InputPicker


InputPicker is a jQuery input plugin that converts an input text field into a filterable, multi-column dropdown select box. When initiated this plugin appends a div element below the input box and styles it with the help of default CSS classes. It supports both local data (data array) and removing data sources (JSON) via AJAX requests. The plugin also gives flexibility to developers to change the width and height.

4. Select2


Select2 is a jQuery replacement for traditional select boxes. Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. It features:

  • Over 40 languages and RTL support.
  • Fully skinnable CSS built with Sass and an optional theme for the Bootstrap 3.
  • Full extensibility to work exactly how you want it to
  • Dynamic item creation
  • Support for both modern and legacy browsers

5. Sweet Dropdown

Sweet Dropdown

Sweet Dropdown is a simple jQuery plugin which creates flexible and animated dropdowns in any direction with any kind of content. It also supports adding icons to select items as well as the option to apply dark or light themes for styling. This plugin works in all major browsers.

6. Awesome Select

Awesome Select

Awesome Select is a beautiful and customizable jQuery plugin for transforming the boring select tag into something beautiful and minimal, with animations inspired from Material Design. You are free to change the way the dropdown looks based on your own taste. This plugin also supports immersive mode, which allows you to render the dropdown in a modal window covering the complete screen. The animations are based on CSS3 transform and transition properties.

7. jQuery Dropdown

jQuery Dropdown

jQuery Dropdown is a flexible and cross-device jQuery plugin for replacing HTML selects and multi-level menus with animated select dropdowns. This plugin allows you to create simple, multiple select, nested, grouped and custom HTML content dropdowns. The plugin allows you to override default settings for animation, keyboard navigation, multiple item selection and other default settings.

8. Combo Select

Combo Select

Combo Select is a jQuery plugin that converts a select box into a searchable and keyboard-friendly interface. The plugin creates a div element and styles it using the default CSS. It also attaches the keydown event to capture key strokes for filtering the select. The other advantage of this plugin is that it falls back to native select on mobile and iPad devices. It features:

  • Search and filter, select items
  • Mobile- and tablet-friendliness (fall-backs to native select)
  • Keyboard accessibility
  • Ease of style
  • Data attribute support
  • Support for both numeric and string data types in select
  • Support for implicit style attributes

9. Fuzzy Dropdown

fuzzy Dropdown

Fuzzy-dropdown is a jQuery plugin that converts a select box into a fuzzy searchable dropdown. Fuzzy string matching is a technique for finding strings that match a pattern approximately rather than exactly. Fuzzy-dropdown delegates interactions to the underlying select box. Also, the dropdown is fully navigable via arrow keys. Fuzzy-dropdown by itself does no styling. All the styling is controlled via CSS. This gives you complete freedom to style your dropdown however you want.

10. DDList


DDlist is a lightweight jQuery plugin that allows you to create a stylish dropdown list supporting list options with text, images, and additional description strings. This plugin hides the select element and the list is ‘reconstructed’ by means of a jQuery-generated <ul> list inside a <div> container. The select element options can also be defined via a JSON array object. The plugin comes with a CSS file that contains various classes to present the internal elements and their styles, giving you the option to modify the existing style to match with your website design.

11. ddSlick


Ever wanted a dropdown with images? Well, you now have a plugin for that! ddSlick is a free and lightweight jQuery plugin that allows you to create a custom dropdown with images and descriptions.

  • Adds images and descriptions to otherwise bland drop downs
  • Allows JSON to populate the drop down options
  • Converts your HTML select element to ddSlick
  • Uses Minimum CSS and no external stylesheets to download
  • Supports call-back functions on selection

12. Dropdown Checkboxes

Dropdown Checkboxes

Dropdown checkboxes is a simple jQuery plugin that turns a bootstrap dropdown component into a compact multi-select dropdown list with checkboxes. This plugin creates a hidden input element. When the values are checked and saved, the plugin creates a JSON array of all checked values and assigns the same to the hidden input box. This plugin also allows you to pre-check the checkboxes on page load. When the selected checkbox’s text values goes beyond a certain length, then the plugin truncates the string value for better UI arrangement.

13. Hierarchy Select

Hierarchy Select

Hierarchy Select is a lightweight jQuery plugin which converts the Bootstrap dropdown into a filterable dropdown list. This plugin works well for simple dropdowns and also for hierarchical dropdown, both with the option to search. You need to define an input element just above the select element. The plugin makes use of this input element to create search functionality for the select box. It attaches a keyup event to the input box and responds to keyboard interaction. For searching the text, it makes use of the indexOf() function which returns the position of the first occurrence of a specified value in a string.

14. Selectric


Selectric is a fast, simple, and light jQuery plugin designed to help in stylizing and manipulating traditional HTML selects elements. It also allows you to select multiple elements and add icons to select list items. It features:

  • Keyboard navigation (Up/Down/Left/Right/Word search)
  • Easy customization
  • Permanently visible options box
  • Independence from external libraries (besides jQuery)
  • Word search compatibility with western Latin characters set
  • 10 built-in themes
  • The ability to dynamically add items to select the element
  • Support for various callbacks for customizable handling
  • Options to populate the data via Ajax
  • Support for custom HTML markup

15. Sumo Select

Sumo Select

Sumo Select is a beautiful and cross-device jQuery plugin that progressively enhances an HTML Select Box into a Single/Multiple option dropdown list. The dropdown list can be fully customizable using simple CSS. It can adapt itself according to any device, keeping the User Experience unbroken. It features:

  • Single and Multi-select options
  • Search support
  • Optgroup support
  • Localization support
  • Full customization by simple css
  • Support for almost all devices
  • Intelligent rendering according to device
  • Rendering native Single/Multiple pop-ups on Android, iOS, Windows and other devices
  • Custom postback data format
  • Selected, Disabled, Select All, keyboard navigation and Placeholder support
  • A redesigned UI (No external icons are used now and the color scheme can be controlled by CSS)
  • Easy extendability to allow developers to create new widgets

16. Fast Select


Fastselect is a lightweight plugin for enhanced select elements based on jQuery. It enables responsive, fast, and sensible UI upgrades of selected elements with features like option searching and remote dataset loading. It weighs less than 5KB (minified and gzipped). It provides features like searching, filtering, tagging, single-select, multi-select, autocomplete, and dynamic AJAX content.

17. Selectize


selectize.js is a lightweight plugin for creating a solid and user-friendly select list with clean and powerful APIs. It’s useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). It features:

  • Skinnability – Comes with LESS stylesheets and shims for Bootstrap 2 and Bootstrap 3.
  • Clean API, code, and extensibility
  • Smart Ranking / Multi-Property Searching & Sorting – Options are efficiently scored and sorted on-the-fly
  • Caret between Items – Use the left and right arrow keys to move between items
  • Select and delete multiple items at once
  • RTL supported – Great for international environments
  • Item Creation – Allow users to create items on the fly
  • Remote Data Loading

18. Light Weight Select


This is a super lightweight jQuery plugin that converts a multi-select drop menu into a simple two panel selection interface. The UI is completely controlled via CSS, so you can change the look and feel according to your needs. The plugin size is 4kb after minification, 2kb for the CSS and 2kb for the double arrow icon.

19. BetterSelecter


BetterSelecter is a simple, clean and easy to use jQuery plugin for converting the standard HTML select box into a stylish and sleek searchable select box. The styling is controlled via CSS classes which gives you flexibility to change the design per your requirements. This plugin appends a div element with a span inside to create a searchable select box and display the selected value.

20. SelectMe


selectMe is a jQuery-based select replacement plugin that replaces the large select element into a neat and searchable solution. It can also add a checkbox or radio button to the items for a better way of selecting the item. It supports:

  • Search for specific elements
  • Selecting or unselecting all elements which are currently shown
  • Show only selected elements
  • Optgroups
  • Navigating through elements with arrow keys (up + down)
  • Selecting elements via space key
  • Jumping directly to the search field when pressing a key while navigating in the dropdown


These lightweight and customizable jQuery plugins allow you to turn the normal HTML select elements into stylish and sleek select elements. These plugins offer various powerful features like searching, grouping, custom HTML markup, keyboard navigation, remote data loading, RTL support, multiple item selection, and other small but handy features. The other advantage is that all the plugins use simple CSS classes to style the select elements. This gives flexibility to the developers to override or change the default plugin style to your own style implementation.

10 jQuery Panorama Plugins

In this post, find a compiled list of 10 jQuery Panorama plugins which you can use to display panorama image or 360 degree view of any image. These plugins are easy to integrate in your website.

1. iPanorama 360° – jQuery Plugin


iPanorama 360° jQuery Plugin is a lightweight and rich-feature panorama viewer for the web. This plugin is built with modern libraries jQuery and Three.js to be used for part of backend solutions. Additionally, it has an awesome feature which allows the user to navigate from one scene to another.

2. Paver


Replicating the photo viewer/panner seen on the experimental Facebook Pages app, Paver is a jQuery-powered plugin that enables easy viewing of wide/panoramic images.

3. jQuery Panorama Viewer

jQuery Panorama Viewer

Panorama Viewer is a jQuery plugin to embed interactive panorama photos on your site.

4. Cyclotron


Cyclotron is a simple jQuery plugin for dragging 360° panoramas (cylindrical projection) and other seamlessly looping images around.

5. True Panorama

True Panorama

True Panorama is 100% responsive, 100% mobile friendly, comes with touch support, modal window support, cross browser compatibility and is simple to use and integrate.

6. 360° Panoramic Viewer

360° Panoramic Viewer

A panorama is a wide-angle view made from a series of images combined together using special software. It offers a very realistic experience, giving the sensation that the user is right there at the location. This plugin manipulates such a panorama image and uses jQuery to rotate, add hotspots and integrate it on mobile, touchpads and desktop browsers.

7. pano


jQuery plugin to display a 360 degree panoramic image.

8. SpriteSpin


SpriteSpin is an amazing jQuery plugin for playing sprite image animations to provide a 360 degree (or panorama and gallery) view of your product image.

9. Panorama 360° jQuery Plugin

Panorama 360° jQuery Plugin

Simple jQuery plugin to display panorama image. It features endless scrolling, full page support and it scrolls with mouse wheel.

10. Panorama 360

Panorama 360

This is a simple tutorial which uses CSS and JavaScript to display panorama images in continuous scrolling.

11 Newest jQuery Progress Bar Plugins

Progress bars are ideal for letting end-users know that something is loading on a website, and they also help to provide a better user experience. In this post, find a compiled list of 11 newest jQuery progress bar plugins which are lightweight, eye catching, and easy to integrate.  You can use these plugins to integrate loading of content, show progress when user scrolls the page, display form completion status, and for many more functionalities.

1. ProgressBarWars (Star Wars Tribute)


ProgressBarWars is a simple (Star Wars tribute), light-weight jQuery plugin that allows you to display an animated horizontal progress meter. Just pass in the goal and amount raised or completed, and the rest is optional.

2. LoadGo


LoadGo is a JQuery plugin that allows you to create a progress bar by using your own images. It creates an overlay above your desire DOM element and simulates a loading process using width calculations.

3. Scroll indicator



Visualize reading progress with small and simple jQuery plugin. Adjust style with CSS or SCSS. Never worry about window resizing. Optional HTML5 progress element. Setup with one line of code.

4. asPieProgress


A jQuery plugin that animates the pie progress.

5. percircle


Percircle is a jquery plugin to make animated CSS percentage circles.

6. jQMeter


jQMeter is a simple, light-weight jQuery plugin that allows you to display an animated horizontal or vertical progress meter.

7. jQuery Progress Tracker

jQuery Progress Tracker

A small (2KB) jQuery plugin that creates a fixed progress indicator based on your content and allows linking between them.

8. Loadie.jsloadie


Loadie.js is a lightweight jQuery plugin to create a preloader that doesn’t suck and that is used by big firms.

9. jQuery Progress Bar

jQuery Progress Bar

A simple jQuery progress bar plugin for Bootstrap forms. Progress bar is collapsible and it can be positioned at top or bottom of screen.

10. Scrollgress


Scrollgress is a simple, lightweight jQuery plugin used to display a progress bar at the top of the page that fills up as the user scrolls.

11. MProgress.js


Google Material Design Progress Linear bar. It uses CSS3 and vanilla JavaScript, which doesn’t depend on any other libraries.

14 Useful jQuery Plugins for Creating Sticky Elements

Sticky elements are a fun way of improving the navigation and display ads on a web page. The sticky elements and headers make it easy to reach the menu without having to scroll to it every time. These sticky elements can be created on a web page with the help of CSS but the process is lengthy, complicated and time consuming; on top of that it doesn’t work well with multiple browsers. Hence using jQuery to create the sticky elements is a far safer option. This article deals with some of the easiest jQuery plugins for creating sticky elements.

1. ScrollNavijs

This jQuery plugin helps with fixing the menu on top of the page once a reader has scrolled on to the second section of the page. It also helps to keep the menu fixed on the bottom of the page while readers  are on the first page.


2. Fixto

Fixto is a jQuery plugin which is used for sticky positioning. It helps in creating sticky elements which can be started, stopped or destroyed and is responsive to the viewport height. It can fix the containers to viewport and handle multiple instances.


3. Headhesive.js

Headhesive.js is a no dependency JavaScript plugin which creates sticky elements as and where required. All you need to do is specify the position of the header and it simply appears there.


4. hcSticky

This jQuery plugin is especially helpful in case of long pages as it creates floating elements. The floating elements ensure that it is always available to the visitors of the page. It also creates floating top menus, prioritizing it to the user.


5. jQuery Stick’em

A very useful and easy to use plugin, jQuery Stick’em helps in making elements sticky when reaching a certain point while scrolling.


6. Scroll Magic

Scroll Magic helps in converting the scroll bar into a progress bar. It helps in fixing an animation to a particular scrolling point, by syncing it with the scroll bar. It also adds parallax effect to the website which helps in delivering a function when users hit a particular scroll position.


7. Sticky Kit

Sticky Kit is a smart and easy to use jQuery plugin which creates sticky elements that are always visible to the page viewer.


8. Auto Fix Anything

When fixed with a certain JS command, Auto Fix Anything helps to fix or unfix an element automatically on the given web page. It allows any container to be fixed cardinally.


9. Sticky Navbar.js

Sticky Navbar.js is a jQuery plugin which not only allows users to fix a header on top of the page while scrolling but also helps in making the sticky elements interesting by addition of preferable jQuery effects or animations from Animate.css library.


10. Smint

Made of mainly two components, Smint helps in keeping the navigation bar on top of the page while scrolling and a menu bar which navigates you to the region of the page clicked. It allows users to move about a web page like a single page website. Simple to implement and easy to use.


11. Position Sticky

Position Sticky is a jQuery plugin that allows users to keep an element fixed or moving relative to the viewport appearance resulting in the formation of sticky elements as and when required while scrolling.


12. Stickyjs

If you’re trying to keep your element always visible on the page, Stickyjs is the jQuery plugin for you. It allows users to produce a sticky element which will always stay with the viewer.


13. jQuery Sticky Alert

Available with a MIT license and free of cost to be used on personal and official websites, JQuery Sticky is a minimalist plugin which allows users to fix the header to a web page.


14. StickUp

This is one of the easiest jQuery plugins which creates sticky elements for the top of the page when scrolled across a certain point and will come back to the original position when scrolled back.


We’ve tried to provide you with the best jQuery plugins available. Hope these plugins will help you to create sticky elements easily on your page.

10 Responsive jQuery UI Snippets

jQuery has gained immense popularity due to its simplicity in designing websites and a number of other benefits and features. jQuery turned out to be a blessing because it saves designers time in not having to rewrite codes for every screen.

Here are some of the top fresh, simple and beautifully responsive jQuery UI snippets:

1.  ToneDen Player

ToneDen player is a pure Java Script customizable audio player. The UI is very simple and pleasing to the eye. With this snippet,  you have lot of options to change and increase the music experience. The ToneDen SDK is loaded asynchronously which means that the page doesn’t have to wait for SDK to load before rendering.


2. Pizza Pie Charts

This is an easy-to-use plugin for creating a pie chart on any device. Once you display a chart you can style it using SASS features. You can also use CSS to add specific color if you’re not opting for SASS. Once you are done with mark up and style simply initialize the pie chart by calling init function.


3. MultiScroll

This is a Java Script used to create divided multi-scrolling pages. It works with a powerful jQuery plugin by creating two vertical scrolling split pages. It is compatible with all mobile devices and a number of browsers. To use it simply link the script file in <head> tag and the code in <body> tag.


4. TourTip

TourTip is an interactive visual guide of all the elements on the web page. You can use this like a page guide and allow the users to learn the features and functions and  in complex, single-page applications. It is extremely flexible and lets you take the control of how people interact with you. You can add external images or content to display.


5. Tip Cards

Tip Cards allows you to create a card layout for users to flip through. It has been used widely to display blogs, web games or portfolio.


6. Slinky

This is a jQuery plugin used to create beautiful scrolling navigation lists with headers. It allows smooth scrolling because it is lightweight and disables pointer events. It is responsive for various sizes and compatible with all browsers.


7. Vanilla Box

This is a very simple, modern plugin for setting up image galleries. It totally focuses on content and is suitable for all modern browsers. Just link the script and CSS files in the <head> tag of HTML file and call the script.


8. Hashtabber

This plugin can be used for a hashchange-driven tabbed content switcher. There are few pre-set themes for it and you can customize it in several ways.


9. Anchorific

Anchorific automatically generates anchored headings and nested navigation based on header tags. It is easy to install and appropriate for one-page documentation files.


10. Unibox

This is a plugin for creating a universal search box with search suggestions.


Autocomplete Migration Guide

The jQuery Autocomplete plugin got a successor recently, the jQuery UI Autocomplete. In this guide we'll look at the old plugin API step-by-step, and how to migrate to the new API.

At first it may look like the new plugin supports barely any of the old options. We'll see how all the old options can be implemented using the three new options and the six events.

The old plugin had two arguments: data or url, and options. Lets start with that data-or-url argument. With the new autocomplete plugin, you'll just pass the data or url to the source option.

So, with the old plugin you'd have this code:

  1. $("input").autocomplete(["a", "b", "c"]);

And that becomes, easy enough:

  1. $("input").autocomplete({
  2.   source: ["a", "b", "c"]
  3. });

The same applies if you provided a URL as the first argument, although there is a difference between the two plugins for remote data. The old plugin expected a special format with pipes to separate values and newlines to separate rows. That is gone for good, the Autocomplete widget now works with JSON by default. The simplest form is the same as in the example above, an array of string values.

Instead of an array of strings, the widget also accepts an array of objects, with at least a label or value property, or both, in addition to whatever else you need. More on that can be found in the documentation and various demos, eg. the Custom Data demo shows how to use custom properties and even display them.

Lets look through the rest of the options for the old plugin, and what to do with them for the new plugin:

  • autoFill: Gone with no immediate replacement available, for good reasons: The default behaviour when selecting items via keyboard now puts the focussed value into the input, like the Firefox Awesomebar does it. It's not the same as what the autoFill option did, but there should be no need to recreate that effect.
  • cacheLength: There is no built-in caching support anymore, but it's really easy to implement your own, as shown by the Remote with caching demo.
  • delay: Still exists with the same behaviour, but the default is always 300 milliseconds.
  • extraParams: Extra params and all other Ajax related options can be customized by using a callback for the source option. Use $.ajax to send the actual request, with the response callback argument passed to source as the success callback for the $.ajax call. The Remote JSONP datasource demo has an example for that.
  • formatItem, formatMatch, formatResult, highlight: All gone, instead use the source option to either provide the formatted data from your serverside, or implement a custom source to do special formatting. The combobox demo shows how to do that, with a more extensive explanation of that demo right on this site.
  • matchCase, matchContains, matchSubset: All gone, too. The builtin matcher for local data will do a case-insensitive match-contains, everything else has to be implemented on the serverside or using the source option. The combobox linked just above also has an example for that.
  • max: Gone; if your server sends too many items, pass a function for the source option that calls $.ajax and truncates or filters the resulting list.
  • minChars: Still present, but was renamed to minLength. Behaves just the same, even the default is still the same, with minLength: 1.
  • multiple, multipleSeperator: Not built-in anymore, but easy to recreate. There are two demos for this, once with local data, once with remote data.
  • mustMatch: Gone, but easy to implement with the select event. Once more, the combobox provides an example for that.
  • scroll, scrollHeight: These option are gone, but the underlying Menu widget actually has support for scrolling. If you have enough items and specify a height via CSS, the menu will scroll.
  • selectFirst: Similar to autoFill (at the top of this list), this option is gone and has now immediate replacement, nor a need for one. The behaviour for selecting values is solid enough to make this option redundant.
  • width: Gone and not required anymore. The menu will automatically be as wide as the input it completes, or wider, as the content requires. And you can always restrict with width using CSS.

And thats about it. If you're still looking for a particular replacement, take a look at the various events available, and study the use of the source-option within the various demos. If you still have a question, post on the Using jQuery UI forum. If you spot some mistake or see something that can be improved in this article, please let us know in the comments.