How to autocomplete data on multiple fields with jQuery and AJAX

You can use jQuery AJAX to autocomplete data on the single or multiple elements when the user search or select value from an element.

It is a better way to allow the users to easily search for data in existing records and get required information e.g. get student details by their id, product details, etc.

In the demonstration, I am using jQuery UI to display a suggestion list and fetch details using PHP from the MySQL database table when a value from the suggestion list gets selected.

How to autocomplete data on multiple fields with jQuery and AJAX

Read more

Add QR code to the webpage with jquery.qrcode.js

QR code is a quick response code that has a large storage capacity. It consists of a black and white square box that you can be read using smartphones or dedicated QR reading devices to gain access to additional information.

This is used for advertisement, storing website URLs, information, etc.

In this tutorial, I am using the jquery.qrcode.js plugin to generate a custom QR code and embed it on the web page.

You can adjust its size, background, and foreground color with options.

Add QR code to the webpage with jquery.qrcode.js

Read more

How to send AJAX request in CodeIgniter 3

If you know how to send jQuery AJAX request in Core PHP then it is simpler for you to do it in CodeIgniter.

In CodeIgniter, you can use the controller and model to handle AJAX call instead of creating a separate file. Make AJAX call either from the view or external script file.

In this tutorial, I am creating a simple example to demonstrate the AJAX calling in CodeIgniter 3.

How to send AJAX request in CodeIgniter 3

Read more

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