Tag: jquery ui

Sometimes requires to search for multiple words and select records according to words matched instead of the exact words.

With only a single like operator, it is not possible to search for multiple words.

Require to split the search term and use it with or and like operators.

In this tutorial, I am using jQuery UI library for displaying suggestion list according to search input.



With jQuery UI it is easier to add Datepicker on the textbox element or in any other HTML elements.

If you like to restrict access of users to select a date within a range then there is minDate and maxDate options are available in jQuery UI.

Using this you can set the date range of the Datepicker.

After defining this options the other days will be disabled which are not in defined range.

In this tutorial, I show you how to use both options in jQuery UI Datepicker to restrict date range.

How to Set Minimum and Maximum Date in jQuery UI Datepicker


jQuery UI library has many widgets for the specific purpose like – Accordion, Tabs, Tooltip, etc. one of them is Datepicker that allows the users to pick a date from the Widget.

It has various options to manage the Datepicker layout e.g. change default date format, restricting date range, show year dropdown, etc.

While using this Widget you may have condition arises where you want to highlight some of the specific dates or change background-color of Holidays, events Days.

You can do this with beforeShowDay option in the datepicker() method. This allows you to specify CSS class which contains your defined CSS style.

How to Highlight Selected date in jQuery UI Datepicker


In WordPress Admin dashboard login form animate with shake effect whenever the user enters wrong details.

This can easily implement using jQuery UI library.

With jQuery UI you can shake an element in specific direction and distance.

Using this you can warn the user when invalid input is entered.

In the demonstration, I am creating a login form and which gets shake when wrong username and password entered.

How to Shake an element with jQuery UI

How To JQuery

A tooltip is a small pop-up element which shows information when moving the mouse pointer to the element.

You can dynamically update the tooltip content with AJAX if you don’t want to fix the content while creation.

You can add the tooltip to the element with Bootstrap, jQueryUI, or any other library.

I am using the jQuery UI library in the tutorial.

In the demonstration, I am displaying the list of users and dynamically load information on the tooltip with AJAX on mouse hover.

Dynamically show data in the Tooltip using AJAX


Add tooltip widget to the control or an element to show a short description or some additional information about the control e.g. – what it does, what values the users can input on it.

It will show when the user moves the mouse pointer over the element.

In this tutorial, I am using jQuery UI to add tooltip that can be attached to any HTML control like – label, input element, span, paragraph, etc.

Easily add Tooltip to the control using jQuery UI Plugin