12 Awesome jQuery Virtual Keyboard Plugins

Virtual Keyboard Plugins

A virtual keyboard is a component that allows a user to enter characters without a physical keyboard. It’s an alternative input mechanism for those who cannot use a physical keyboard, or for multi-lingual users who switch frequently between different character sets or alphabets. Virtual keyboards are commonly used as an on-screen input method on smart devices or small devices with no ability/space to attach a physical keyboard.

In this post, you’ll find a compiled list of 12 awesome jQuery virtual keyboard plugins, which allow you to attach an on-screen virtual keyboard. These jQuery plugins support various keyboard layouts, different languages, various theme options for look and feel and option for having a QWERTY keyboard, numeric keyboard or mixed keyboard.  If you are not happy with the default keyboard layout, then you can create your own layout with ease. Enjoy!

Keyboard

Keyboard

Keyboard is an on-screen keyboard jQuery plugin embedded within the browser window which will pop up when a specified entry field is focused. The end user can type and then preview the input before accepting or cancelling. It can be set to always remain open, and can also be programmed not to show a preview. The plugin can be programmed to display a QWERTY keyboard, numeric keyboard, alphabetic keyboard, hex value keyboard or iPad style keyboard. For sensitive information, there is also an option to mask the input. This plugin is dependent on the jQuery UI library.

Talking Keyboard

Talking Keyboard

Talking keyboard is a jQuery based plugin that enables an interactive and speaking English QWERTY keyboard. It is based upon SkeletonCSS, jQuery, and ResponsiveVoice. ResponsiveVoice is a HTML5-based Text-To-Speech library designed to add voice features to websites and apps across all smartphone, tablet and desktop devices. It supports 51 languages in 168 voices, with no dependencies. The beauty of this plugin is that it speaks when the user types any character.

jKeyboard

jKeyboard

jkeyboard is a jQuery plugin for creating an on screen visual keyboard that supports custom layouts for multiple languages. It supports English, Azeri Turkish (a Turkic language) and Russian language. It can be programmed for a QWERTY keyboard or a numeric keyboard.

Keypad

Keypad

Keypad is a jQuery plugin that attaches a popup keyboard to a text field for mouse-driven entries or adds an inline keypad in a division or span. The keypad functionality can easily be added to a text field with appropriate default settings. Use it with a password field for more secure text entry. You can also remove the keypad widget if it is no longer required. This plugin supports many languages which helps to implement localization. This plugin also allows users to randomize the key’s position for security purposes.

Keyboard Pagination

Keyboard Pagination

Keyboard pagination is a lightweight jQuery plugin which allows you to attach keyboard shortcuts for pagination. Once attached, using the keyboards left and right arrows, you can switch between the previous and the next page. This really helps to make the website more interactive.  It attaches a custom callback function code, detecting which one of the two keyboard arrow keys were selected: left or right. It then selects a corresponding pagination link and simply simulates (triggers) a click event for it. It supports numbered (1,2, 3…) links, previous or next page links and first and last page links.

 MLkeyboard

MLKeyboard

ML Keyboard is a multi-language jQuery virtual keyboard with features for changing input layouts on the flight. It opens up the virtual keyboard at the bottom of the page, when there is a focus on the attached input field. It currently supports English, Spanish, Italian, Portuguese and Russian languages. It also comes with various configurable options to control the keyboard display, like displaying the keyboard permanently, or controlling the opening and closing speed.

jQKeyboard

jQKeyboard

jQKeyboard is a jQuery plugin that allows you to add a responsive virtual keyboard to the input text field. It creates an alphanumeric keyboard and allows you to customize the default layout of the keyboard to your liking.

jQuery Keyboard

jQuery Keyboard

jQuery Keyboard is a jQuery plugin for drawing a virtual keyboard. It is dependent on jQuery and Bootstrap. It comes with 3 themes and 5 languages. It has several themes to customize the keyboard.  You can choose the language of the keyboard to draw, if it is defined that the keyboard type will be: ‘Full Keyboard’ or ‘KeyPad’. It has several options of personalization and customization to choose from.

jQVirtual Keyboard

jQVirtualKeyboard

jQVirtual Keyboard is a jQuery and jQuery UI based virtual keyboard plugin that creates a draggable keyboard on the screen. Currently it supports English and Bulgarian, but it also provides an option to create your own layout for the keyboard via a custom layout. You can also choose a dark or light overall theme depending on your page design.

 SoftKey

SoftKey

SoftKey is a jQuery based virtual keyboard plugin that creates an on-screen keyboard. This plugin allows you to define the layout of the keyboard and customize to your liking. You can define the layout as per your choice and set the order for number and alphabet keys.

jQBTK

jQBTK

jQBTK (jQuery Bootstrap Touch Keyboard) is a jQuery plugin for creating customizable on-screen virtual keyboards & numpads on mobile touch devices. It only works with touch devices. The plugin listens for touch events and uses the Bootstrap popover component, dynamically adding buttons to form a keyboard and inserting the characters into the HTML input when pressed.

NumPad

Numpad

NumPad is a flexible touch-optimized jQuery plugin for creating a numeric keypad for web applications based on jQuery, but it is mainly intended to be used in mobile web applications to quickly input numbers. The numeric keypad can be used to fill inputs, password fields, general div-elements or entire table columns. It works perfectly with most frameworks, including jQuery mobile and Bootstrap.

Conclusion

To conclude, these jQuery virtual keyboard plugins allow you to add an on-screen virtual keyboard to any input field. These plugins support different keyboard layouts, offer many languages and come with a variety of different theme options. Based on your needs, you can either open a QWERTY keyboard or a numpad keyboard. Some of the plugins also allow the user to change the layout/position of the keys as per their need.

10 Awesome jQuery Print Page Plugins

Are you looking to create a print friendly website with custom implementation instead of default browser behaviour? Do you want to allow your users to print specific parts of the web page, instead of being forced to print the complete page? Do you wish to add custom headers and footers and implement different CSS styles for the print version of the page? If so, then you have just struck gold with this article!

Here you’ll find a list of 10 awesome jQuery print page plugins which allow you to customize the default print behaviour of the browser and offer various great customizations like printing page sections only, showing print previews before printing content, adding a custom header and footer and using external style sheets for document printing. Enjoy!

The Top 10 List

 

printThis

https://github.com/jasonday/printThis

printThis

printThis is a lightweight jQuery plugin which allows users to print either specific elements or the complete page. Using this plugin, one can:

  • Print multiple elements
  • Preserve the page’s CSS/styling while printing
  • Have the option to add your own CSS specifically for printing
  • Define a header and footer text which will be appended on the print page
  • Play with various options before printing the page. For example, removing inline styles.

  jQuery printThis

jQuery printThis

https://github.com/valluminarias/jquery-print-plugin

jQuery printThis is a simple jQuery plugin which allows you to print any web page. It also allows you to include or exclude sections of the document while printing. To specify which sections you’d like to include or exclude, you can specify id, class or even the html element tag. It also supports printing your webpage with a specified stylesheet. Simply provide the name of the stylesheet file and the plugin will use styles from that file when creating the print document.

PrintPage

https://github.com/posabsolute/jQuery-printPage-plugin

Printpage

Printpage is a jQuery plugin which allows you to print the web page without leaving the website. This plugin was created to overcome the issues with the traditional method of printing, which reuires the use of the print stylesheet. The print stylesheet is a way to disable everything that is not relevant content. But working in this program gets messy and disabling various parts of the website can be tedious. PrintPage overcomes these issues by creating an iFrame and printing it directly instead of opening a popup.

Print Preview

https://github.com/etimbo/jquery-print-preview-plugin

Print Preview

The jQuery Print Preview plugin is designed to provide visitors with a preview of the print version of a website. Unlike traditional print previews this plugin brings in all content and print styles within a modal window. From the modal window, there is an option to print the page and close the modal window. This plugin works in all the modern browsers.

offReg

https://github.com/vonKristoff/offreg

OffReg

Offreg is a jQuery plugin that uses canvas to create a ‘screen print’ offset effect on an image, by altering the pixel data. It can convert your images into RGB prints, works also very well with B&W photos and even on transparent photos. This plugin also offers various options to set transparency, rotation and offset parameters.

PrintMe

https://github.com/menusal/printMe

PrintMe

PrintMe is a lightweight jQuery plugin for printing any html element. It is only dependent on jQuery library. This plugin also allows the user to add external style CSS and add a title to the document. You can add multiple external style sheets to this plugin while calling it.

Print

https://doersguild.github.io/jQuery.print/

Print

Print is an easy and simple jQuery plugin that allows the webpage visitor to print only one specific part of the web page. By default, this plugin creates a hidden iFrame element so that it can print from an iFrame instead of a pop-up window. This can be controlled by setting this option to ‘true/false’. Like other plugins, it also supports external style sheets and allows appending/prepending custom headers and footers to documents. To exclude any element of the page from printing, just apply “no-print” CSS class to that section and the plugin will take care of the rest.

PrintArea

https://github.com/RitsC/PrintArea

PrintArea

PrintArea is a jQuery Plugin that allows your visitors to print a specific section of the page. This plugin allows you to specify the mode of the print. Currently it supports iFrame and popup mode. The iFrame-mode is unobtrusive while popup mode opens a separate browser window. Popup mode allows for the option of leaving the window open or automatically closing after printing.

Print Element

http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/

Print Element

Print element is a very simple and lightweight jQuery plugin for printing content off any web page. It also allows you to either print from a popup window or from iFrame. This plugin allows you to set the page title, override the default CSS and set iFrame mode options for styling and positions.

jQuery Print Preview

https://github.com/alamnaryab/Print-Preview-jquery-plugin

Print Preview

jQuery Print Preview is a simple jQuery plugin for showing a print preview before actually printing the content. It works for a specific element or complete page. It opens a new popup window to show what exactly will be printed. It also offers various options to play around with the print preview window. You can set width, height, top, left, page title and set a new style to override the existing styles.

jQuery Code

These jQuery plugins will all serve you well depending on your needs, but if you don’t wish to use and of these jQuery plugins, here is a simple jQuery code to print the complete page:

$(document).ready(function() {
   $(‘#btnPrint’).click(function() {
       window.print();
   }
});

You can also print specific sections of the page by hiding the other content on the page:

$(document).ready(function() {
   $(‘#btnPrint’).click(function() {
      //Hide all other elements other than elmToPrint.
      $("#elmToPrint").show();
      window.print();
   }
});

Want to see a working sample of the jQuery code for printing sections of the page? Look here!

Conclusion

Although these days printing a webpage is not common, when the need arises it’s nice to be able to complete the task quickly and easily. These jQuery print page plugins allow you to print either complete web pages or specific sections of the page. They offer great customization to overwrite default print behaviour of the browsers, and you can also add custom headers and footers and use external style sheets for document printing. These plugins are very lightweight, easy to setup and quick to integrate. Even if they aren’t used regularly, implementing one of these plugins will make like easier for you and your website visitors!

Optimize your jQuery selectors for best performance

Introduction

Over time, the data size has increased for nearly every application. Due to huge amount of data residing in various database servers, performance becomes the most important and integral part of any application. If the page takes lots of time to render the data, it creates a bad impression and results in loss of interest by the end users. There are different places where performance can be increased, including database code, server side code to process the data and client side code.
Application development has also gone through monumental change over time. The client calls REST API and the server automatically sends the data in JSON or some other format. It’s the responsibility of client side code to process and render it for display. Therefore, it’s pretty important to follow best practices for client side code in order to ensure best performance. jQuery is one of the most popular and most used client side libraries, so writing high performance jQuery code is of the utmost importance. One of the key areas of performance imporvement is in the methods for selecting and manipulating HTML elements. jQuery selectors allow you to select and manipulate HTML element(s) quite easily. This post shows how to optimize your jQuery selectors for best performance.

Let’s begin!

Before we get into optimization tips, let me first give you a quick overview of the different categories of jQuery selectors. There is no official categorization, but they can be categorized in this way:

• ID selector $(‘#elementID’)
• Tag selector $(‘p’)
• Class selector $(‘.CSSClass’)
• Attribute selector $(‘[type=”text”]’)
• Pseudo selector $(‘:visible’)

Always use ID selector if possible

Accessing DOM is a very expensive operation, so it’s beneficial to minimize effort and time. As we all know, the ID attribute is unique for each HTML element on the page. in JavaScript document.getElementById() is the function that one would use to select the HTML element. It’s the fastest and the best way to select the element because it directly maps to the element. jQuery is a library written on top of JavaScript, which means that it internally calls the JavaScript functions to do the job. When you use ID as a selector in jQuery, it internally calls document.getElementById(). To select the HTML element with elm as ID, the jQuery code looks like this: $(“#elm”);
This method works well in all browsers, so it’s a good choice if you are using an older browser.

Cache your selector

Caching improves the performance of the application. You can cache data or objects for better performance. You can also cache your jQuery selectors for better performance using the ID as your selector (as mentioned in the previous tip). When you don’t cache the selector, jQuery must rescan the DOM to get the element. You may not feel the difference in small applications, but with large applications this becomes very critical. Let’s look at the process of caching objects in jQuery. The following simple line of code caches the selector and stores it in the $elm variable:

var $elm = $("#elm");

Now use the $elm variable instead of using the jQuery ID selector. Like this:

var $elm = $("#elm");
 $elm.addClass(‘dummy’);

Remember, the scope of a variable is limited to where it is defined. If it is defined as a global variable then you can use it anywhere in the jQuery code, but if it is inside a method the scope will be limited to that particular method only. Global caching is useful for elements which are frequently used in the code.

Define a context with jQuery selectors

By default, jQuery selectors perform their search within the DOM. But while defining the selector, you can pass the context, which limits the searching range for the jQuery selector. In other words, you are instructing jQuery to look inot the context rather than beginning the search from the document root. This helps in speeding up the searching process which will definitely improve the performance. Passing the context is optional, but you should use it whenever you can.
Enough theory! Let’s take a look at a practical example. Consider the following HTML code:

<div id=”parent1”>
<div class=”child”> </div>
<div class=”child”> </div>
<div class=”child”> </div>
</div>

If you want to select all the div element with child class you can use the following jQuery code:

var $elm = $(".child");

The above code will search for elements with child class starting from the document root. It can be optimized by passing via an alternate selector. Like,

var $parent = $("#parent1");
 var $elm = $(".child", $parent);

This limits the search range, so now searching is limited to the div with ID parent1. The context argument can be a DOM element, a document, or a jQuery object. If you pass context, then jQuery will internally use the find method to retrieve the elements. So the above code is internally converted to:

var $elm = $parent.find(".child");

jQuery first checks if the passed context is a jQuery object. If it is, it calls the find() method on the given context. If the given context is a DOM element, it first converts it to a jQuery object and then executes the find() method. As such, it is better to pass the object as context instead of the DOM element because it will reduce the conversion time.

Don’t repeat your selectors

As mentioned earlier, you can cache the jQuery selectors which prevents you from repeating your selector. jQuery also offers chaining, which allows you to chain multiple methods in a single call. Consider the following jQuery code:

$("div").css("color", "red");
 $("div").css("font-size", "14px");
 $("div").text("New Text!");

Below is the first optimized version using caching:

var $div = $("div");
 $div.css("color", "red");
 $div.css("font-size", "14px");
 $div.text("New text goes here!");

Next is the second optimized version using chaining:

$(“div”).css({“color”, “red”, “font-size”, “14px”}).text(“New text goes here!”);

Use class selector wisely

jQuery also provides a CSS class selector which allows you to select elements with a particular CSS class. This is again a very useful and popular selector as it allows you to select multiple elements at once. However, you have to be cautious while using class selector. The following jQuery code will select all the elements with “dummy” class applied to them:
$(“.dummy”)

In this case, jQuery has to scan the complete DOM to discover elements with dummy class. As mentioned earlier, traversing DOM is a very expensive process so it’s always better to minimize this effort. In this case, you can pass a tag name to reduce the searching scope. Like this:

$("div.dummy");

The above code tells jQuery to only give me the DIV elements with dummy CSS class applied. Though the class selector works quite well in modern browsers, older browsers have performance issues with class selector. That being said, it’s not always a good choice to add a tag name with class selector. Why?

In this example, jQuery will first search for all elements with class dummy and then filter records to only return those elements that are div elements. So when the dummy class is only meant for div elements, you need to specify the tag name in order to add an extra step of filtering. Keep in mind that this is only useful when the CSS class is applied to different HTML elements like span, paragraph and div.

Be very specific about selectors

Did you know that jQuery selectors are executed from right to left? In other words, the last selector will be executed first when there are multiple selectors. Consider the following example:

$("div.parent .child");

In this example, jQuery will first search for all elements with class child (last selector executed first) and then apply a filter to return only those elements which are div elements with a parent class applied. This is the optimized version:

$(".parent div.child");

Here we are more specific on the last selector, which helps to speed up performance!

Look for an alternative for the Pseudo selector

Pseudo class selectors are CSS selectors with a colon preceding them. They are also available with jQuery – :visible, :checked or :first. Pseudo selectors are useful for selecting elements with different states, or a particular element from a set of elements, but they are slower compared to other jQuery selectors. You should either find a way to replace the pseudo selector or be very specific in using it. Let’s take a look at examples of both. The following jQuery code selects all elements which are visible:

$(":visible");

You can be more specific here. Like,

$("input:visible");

or even better,

$("form").find("input:visible");

Pseudo selectors like :first, :last and :eq allow you to select a particular element from a set of elements. As an example, the following jQuery code will select the first table row using the :first pseudo selector.

$("tr:first")

The above code can be replaced with better performing code, but first you need to cache the selector (table row in this case).

var tRows=$('tr');

Since jQuery stores this as an array, we can take advantage of it. To get the first table row:

var firstRow=$(tRows[0]);

To get the last element (:last),

var lastRow = $(tRows[tRows.length - 1]);

Or to get any nth row (:eq(n)),

var nRow=$(tRows[n]);

Conclusion

jQuery is an awesome library that makes developers lives simple, but when not used properly it can be the stuff of nightmares! It’s important to write highly optimized and efficient code for better performance and scalability, on any application. This post shows how to write optimized code for jQuery selectors. These optimization tips show the importance of ID based selectors, the advantages of caching the selectors, defining a context to speed up DOM traversal, being very specific about the selector and using class & pseudo selectors wisely. Make a habit of following these tips to get the best performance from your code!

5 Useful jQuery Code Snippets For Developers

This post provides a list of 5 useful jQuery code snippets that every web developer must have in his kitty. These are useful for implementing different day-to-day tasks. These snippets can be used to change the button text on click, disable text selection on the website, check Internet connectivity, randomly change the element’s color and/or create an overlay div element. Check it out!

1. Change button text once clicked

The jQuery code below changes the button text once it is clicked. You may need this to inform users that the button has been clicked. As an example, when a ‘submit’ button is clicked, you could change the button text to read “submitting,” and when the request has been processed the text could change again it say “submitted”.

$(document).ready(function(){
    $("#btnSubmit").click(function(){
    	$(this).val("Submitting...");
		//Actual code goes here…
	 	$(this).val("Submitted...");
    });
});

2. Disable text selection on the website

If you wish to restrict text selection or disable copying text from your website, the following jQuery code would help you to achieve this goal. The following jQuery code will disable text selection from all SPAN, Paragraph and DIV elements present on the page. If you integrate this piece of code globally, then you can restrict the text selection for SPAN, Paragraph and DIV elements for the complete website.

$(document).ready(function(){
$('span,p,div').attr('unselectable', 'on')
         .css('user-select', 'none')
         .on('selectstart', false);
});

3. Check Internet Connectivity using jQuery

Sometimes before executing a piece of code, you need to check the Internet connectivity. The following jQuery code uses the navigator.onLine() property to see if the browser is online or offline.

$(document).ready(function() {
  function checkInternet() {
    var status = navigator.onLine;
    if (status)
      return true;
    else
      return false;
  }
   var bIsInternetAvailable = checkInternet(); 
});

Alternatively, you can also check with the jQuery library itself. The following jQuery code references the jQuery library from Google CDN. Google CDN is up 99.99% of the time. If the jQuery library is not loaded, the window.jQuery returns false.

4. Random background color change for any element

The following jQuery code will change the background color of DIV elements every 2 seconds. This code first creates a random color number using the Math.random() function and then using jQuery .css() method, assigns the background-color CSS property to the random color value.

$(document).ready(function() {
  function ApplyColor() {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16);
    $('div').css("background-color", '#' + randomColor);
    setTimeout(changeColor, 2000);
  }
  ApplyColor();
});

The problem with the above code is that we don’t have any control over the selection of the color. The randomly generated color may not suit the element design so it’s better to first define a set of colors and let the code choose the color from the defined set. The following jQuery code defines an array of 4 colors and then the code picks up any one item randomly from the array and applies the same.

function ApplyColor() {
  var rndColors = ["#00FF00", "#CCCCCC", "#995499", "#FF9900"];
  var selColor = Math.floor(Math.random() * rndColors.length);
  $('div').css("background-color", rndColors[selColor]);
  setTimeout(changeColor, 2000);
}

5. Create overlay div on screen and remove it on click

An overlay is a DIV element that stays fixed on the screen (even when you scroll) and has some opacity to create a layer effect. The following jQuery code creates an overlay DIV and appends it to HTML body. It is then removed when clicked.

$(document).ready(function() {
  $('

‘) .css({ position: ‘fixed’, top: 0, left: 0, right: 0, bottom: 0, opacity: 0.8, background: ‘DarkGrey’, display: ‘none’ }) .appendTo(‘body’) .fadeIn(‘normal’) .click(function() { $(this).fadeOut(‘slow’, function() { $(this).remove(); }) }); });

Conclusion

To sum it up, these handy jQuery code snippets provide solutions for several different functionalities and should absolutely be in your toolbox. These tiny snippets can save you time, and allow you to implement with ease on the client side. Feel free to use these snippets at will!

Get HTML Table Cell Value Using jQuery

HTML tables are great for displaying data in tabular form and when implemented can also support features like sorting, paging, and filtering records. You may need to interact with the table to get its data when a table cell is clicked. So in this quick post, we’ll look at how to get the table cell value when the user clicks on the cell using jQuery. Take a look at the image below for reference:

Get HTML Table Cell Value

HTML Markup

To get started, create a standard HTML table on the page. For this demo, our table has 3 columns: Name, Age, and Country, along with some random data. There is also a span element present to show the clicked table cell value.

<tableid="tblData">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Maria Anders</td>
<td>30</td>
<td>Germany</td>
</tr>
<tr>
<td>Francisco Chang</td>
<td>24</td>
<td>Mexico</td>
</tr>
<tr>
<td>Roland Mendel</td>
<td>100</td>
<td>Austria</td>
</tr>
<tr>
<td>Helen Bennett</td>
<td>28</td>
<td>UK</td>
</tr>
<tr>
<td>Yoshi Tannamuri</td>
<td>35</td>
<td>Canada</td>
</tr>
<tr>
<td>Giovanni Rovelli</td>
<td>46</td>
<td>Italy</td>
</tr>
<tr>
<td>Alex Smith</td>
<td>59</td>
<td>USA</td>
</tr>
</table>
<br/>
<span id="spnText"></span>

CSS

The following CSS classes are used to style the table and its rows. The highlightCSS class styles the selected table cell. There are also styles defined to provide alternate colors to the table rows.

table {
 font-family: arial, sans-serif;
 border-collapse: collapse;
 width: 100%;
}
td,
th {
 border: 1px solid #dddddd;
 text-align: left;
 padding: 8px;
}
th {
 background-color: #ccd;
}
tr:nth-child(even) {
 background-color: #dddddd;
}
tr:nth-child(odd) {
 background-color: #ddeedd;
}
.highlight {
 background-color: Yellow;
 color: Green;
}

jQuery Code

To get the value of the clicked cell, the jQuery solution is to attach a click event to all the table cells and assign the highlight CSS to the clicked cell and obtain its value. Then show this value on the screen by assigning it to the span element.
Here is the complete jQuery code:

$(document).ready(function() {
 $("#tblDatatr:has(td)").mouseover(function(e) {
 $(this).css("cursor", "pointer");
 });
 $("#tblDatatr:has(td)").click(function(e) {
 $("#tblData td").removeClass("highlight");
 var clickedCell= $(e.target).closest("td");
 clickedCell.addClass("highlight");
 $("#spnText").html(
 'Clicked table cell value is: <b> ' + clickedCell.text() + '</b>');
 });
});

This jQuery code performs the following functions:

  • First, it attaches a mouseover event to all TD elements to change the mouse cursor to hand style. This tells users that the cell is clickable.
  • Then the code attaches a click event to all the TD elements of the table. Inside the click event, it first removes the highlight CSS class from the previously clicked TD. Then, it obtains the clicked cell object using the jQuery closest method. This method returns the first element that matches the selector. It starts the search from the current element and progresses up through the DOM tree until it finds a match. Once the currently clicked cell is identified, we assign the highlight class to the currently selected cell. In the end, it obtains the clicked cell’s text and assigns it to the span tag to display it on screen.

You can check out the demo at the following link!

Conclusion

To sum it up, we’ve just learned how to get the clicked HTML table cell value using jQuery. The jQuery solution uses jQuery closest to find the clicked table cell within the table element. The solution also highlights the selected element and then displays the cell’s value on the screen. Based on your needs, you can easily modify this section to take further action on the cell value.

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

https://github.com/thdoan/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

http://project.zyy1217.com/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

https://github.com/ukalpa/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

https://select2.github.io/

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

http://sweet-dropdown.adepto.as/

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

https://github.com/prevwong/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

https://github.com/daneWilliams/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

https://github.com/PebbleRoad/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

https://github.com/zeusdeux/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

http://code.cwwonline.be/serviceddlistjquery

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

ddSlick

http://designwithpc.com/Plugins/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

https://github.com/creativecirclemedia/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

https://github.com/NeoFusion/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

http://selectric.js.org/

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

http://hemantnegi.github.io/jquery.sumoselect/

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

http://dbrekalo.github.io/fastselect/

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

http://selectize.github.io/selectize.js/

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

LightWeightSelect

https://github.com/keyo321/jQueryLightWeightMultiSelect

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

https://github.com/BenMMcLean/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

https://github.com/bschueller/jquery.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

Conclusion

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.