Makitweb Posts

The autocomplete functionality shows the suggestion list according to the entered value. The user can select a value from the list.

With jQuery UI you can easily add autocomplete widget on the input element. Navigate to the suggestion list either by mouse or keyboard arrow keys.

It has the various options that allow us to customize the widget.

You can fix the suggestion source value while initializing in this case whenever the user typed any character then it searches the value within the given source value or you can make it dynamic with AJAX.

In the demonstration, I am implementing this on an element which shows the user’s name list according to the entered value with AJAX.

jQuery UI autocomplete with PHP and AJAX


You cannot directly access the system feature in your PhoneGap app to extend its functionality.

PhoneGap provide various plugins that allow accessing features like – camera, geolocation, contacts, battery status etc.

The plugins are written in native language for each platform e.g. Java for Android, Objective-C for IOS, etc. It is accessed by JavaScript in PhoneGap project.

You can easily add plugin using NodeJS.

Plugin implementation is different for each platform.

In this tutorial, I am adding the battery-status plugin to PhoneGap android app. That gives battery level status of the device.

To deploy the application I am using PhoneGap Build.

Add plugin to the Android app - PhoneGap


All logical operation and database handling done in the Models like insert, update or fetch records.

Codeigniter has predefined Database methods to perform database request.

In the demonstration, with View show the HTML form and when the user submits the forms then call the Model method to insert record from the controller.

Insert record to Database Table - Codeigniter


Codeigniter is a lightweight PHP-based framework to develop the web application. It is based on MVC (Model View Controller) pattern.

  • The model handles the data processing – Return data, Insert, Update, or delete records from Database Table.
  • The view displays the final output.
  • The controller manages the Model and view. It handles the users’ inputs.

In this tutorial, I cover basis about Codeigniter.

How to install and setup Codeigniter


Bootstrap provides dozens of custom plugins that helps to create better UI. With this, you can easily add tooltip to the HTML elements.

A tooltip will appear when the user moves the mouse pointer over the element e.g. link, buttons, etc. This gives hint or quick information to the user.

It is helpful for the new visitor to the website to understand the advanced UI and functionality.

Add tooltip to the element with Bootstrap


PhoneGap is a framework that use to build mobile applications for multiple platforms – Android, iOS, Windows Phone, Blackberry etc.

With HTML, CSS, and JavaScript you can build an application.

You don’t have to require to re-write code for other platforms.

App built with Cordova are native apps that can be published on the app store. With the plugins, you can extend your app functionality.

You can either deploy your project online or offline.

In this tutorial, I show how you can create an Android app and deploy it using PhoneGap build.

Make android app with PhoneGap Build


Html2Canvas is a JavaScript library that provides functionality to take screenshot of the whole web page or specific part.

It technically doesn’t take the screenshot but creates the view based on the available information on the page.

This returns HTML5 canvas element which you can use to show screenshot preview on the screen or create a new image file.

Take screenshot of webpage with html2canvas


AJAX is use to communicate with the server to perform the action without the need to refresh the page.

You can either handle AJAX requests on the same page or on the separate page.

In this tutorial, I show how you can send and receive AJAX requests on the same page.

How to handle AJAX request on the same page - PHP


The pace.js is an automatic page load progress bar. You don’t need to write any code to initialize the script during page load.

It is easy to implement and not dependent on any other external JavaScript libraries.

You can also use this with AJAX request to show the progress bar when the request is been triggered.

Several themes with different-different colors are available that you can use.

Automatic page load progress bar with Pace.js

Javascript Jquery

There is always the possibility that the users may not enter the values as we expected and the data is being saved on the Database table. E.g. unwanted whitespace or characters with the value.

You will see the issue when you check for duplicate records or sort the list.

MySQL have some string functions that you can use to eliminate the extra space or characters from the field.

Remove unwanted whitespace from the column – MySQL