jQuery UI autocomplete with PHP and AJAX

The autocomplete functionality shows the suggestion list according to the entered value. You can choose a suggestion from the list. With jQuery UI you can easily add autocomplete widget to the input element. You can use your mouse or keyboard arrow keys to navigate the suggestion list. The widget has various options for customization.

You can set the suggestion source value while initializing the widget. This means it will search for values within the given source value whenever the user types any character. Alternatively, you can make it dynamic with AJAX.

In this tutorial, I show how you can add jQuery UI autocomplete on the textbox and select single or multiple values from the suggestion list.

jQuery UI autocomplete with PHP and AJAX

Read more

Add Bootstrap Tooltip: Elevate Your Website’s User Experience

Bootstrap tooltip offers a powe­rful tool for enhancing the user e­xperience of a we­bsite. These small pop-up boxe­s provide valuable information, explanations, and conte­xt when users interact with spe­cific elements.

By imple­menting Bootstrap tooltip, websites can e­ffectively guide use­rs, improve usability, and create an e­ngaging interface.

This article e­xplores the process of adding a Bootstrap tooltip to e­levate the use­r experience­ on your website.

I am using Bootstrap 5 in this tutorial.

Add Bootstrap Tooltip: Elevate Your Website's User Experience

Read more

Take screenshot of webpage with Html2Canvas

Html2Canvas is a JavaScript library that allows you to take a screenshot of the entire web page or a specific section with just a few lines of code.

It returns an HTML5 canvas element when it is initialized on the element that you can use to create a new image file or display a screenshot preview on the screen.

In this tutorial, I show how you can use Html2Canvas library to take a screenshot and save it to the server using PHP.

Take screenshot of webpage with Html2Canvas

Read more