jQuery UI autocomplete in Bootstrap Modal Popup Using PHP Ajax
In this tutorial we are going to see how to implement jQuery UI autocomplete in Bootstrap Modal Popup Using PHP Ajax. Please check my previous tutorial on this jQuery UI autocomplete before continuing this tutorial.
Invoice System Using jQuery AutoComplete
jQuery Autocomplete Mutiple Fields Using jQuery, Ajax, PHP and MySQL
jQuery Autocomplete Post Tagging System Like In WordPress
Two Fields jQuery UI Autocomplete Using Jquery PHP MYSQL
Google Address Autocomplete API
jQuery UI Autocomplete For Two Fields Using PHP Ajax and MySQL
Steps:
1. Create Full Screen Bootstrap Modal Popup.
2. Adding Invoice HTML Form inside Full Screen Bootstrap Modal Popup.
3. Integrating jQuery UI autocomplete in the Bootstrap Modal Popup.
Create index.php file and add basic HTML markup in it.
Create “modal_auto” folder in your server root (htdocs or www) directory. Now create index.php, css & js folders, and add the following basic html in index.php file. Also download bootstrap, jQuery, jQuery UI from their respective sites and add it to their css and js folders. (or else download source file and use it.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Modal jQuery Autocomplete</title>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Noto+Serif:400,700">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css" />
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
You may also interested in Learning jQuery Autocomplete from scratch. Checkout Video Tutorials series on: jQuery UI Autocomplete from Scratch
Learn jQuery Autocomplete in 3 Minutes
Create Full Screen Bootstrap Modal Popup.
Here our HMTL markup for full screen bootstrap modal popup. Add this following markup in the index.php itself.
<div class="modal modal-fullscreen fade" id="modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Create Invoice</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h2>From,</h2>
<div class='row'>
<div class='col-xs-12 col-sm-4 col-md-4 col-lg-4'>
<div class="form-group">
<input type="email" class="form-control" id="companyName" placeholder="Company Name">
</div>
<div class="form-group">
<textarea class="form-control" rows='3' id="companyAddress" placeholder="Your Address"></textarea>
</div>
</div>
</div>
<h2>To,</h2>
<div class='row'>
<div class='col-xs-12 col-sm-4 col-md-4 col-lg-4'>
<div class="form-group">
<input type="email" class="form-control" id="clientCompanyName" placeholder="Company Name">
</div>
<div class="form-group">
<textarea class="form-control" rows='3' id="clientAddress" placeholder="Your Address"></textarea>
</div>
</div>
<div class='col-xs-12 col-sm-offset-3 col-md-offset-3 col-lg-offset-3 col-sm-4 col-md-4 col-lg-4'>
<div class="form-group">
<input type="number" class="form-control" id="invoiceNo" placeholder="Invoice No">
</div>
<div class="form-group">
<input type="date" class="form-control" id="invoiceDate" placeholder="Invoice Date">
</div>
<div class="form-group">
<input type="number" class="form-control amountDue" id="amountDueTop" placeholder="Amount Due">
</div>
</div>
</div>
<h2> </h2>
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<table class="table table-bordered table-hover" id="table_auto">
<thead>
<tr>
<th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
<th width="15%">Item No</th>
<th width="38%">Item Name</th>
<th width="15%">Price</th>
<th width="15%">Quantity</th>
<th width="15%">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><input type="text" data-type="productCode" name="itemNo[]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input type="text" data-type="productName" name="itemName[]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input type="number" name="price[]" id="price_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="number" name="quantity[]" id="quantity_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="number" name="total[]" id="total_1" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='row'>
<div class='col-xs-12 col-sm-3 col-md-3 col-lg-3'>
<button class="btn btn-danger delete" type="button">- Delete</button>
<button class="btn btn-success addmore" type="button">+ Add More</button>
</div>
<div class='col-xs-12 col-sm-offset-4 col-md-offset-4 col-lg-offset-4 col-sm-5 col-md-5 col-lg-5'>
<form class="form-inline">
<div class="form-group">
<label>Subtotal: </label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="form-control" id="subTotal" placeholder="Subtotal" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</div>
</div>
<div class="form-group">
<label>Tax: </label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="form-control" id="tax" placeholder="Tax" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</div>
</div>
<div class="form-group">
<label>Tax Amount: </label>
<div class="input-group">
<input type="number" class="form-control" id="taxAmount" placeholder="Tax" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
<div class="input-group-addon">%</div>
</div>
</div>
<div class="form-group">
<label>Total: </label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="form-control" id="totalAftertax" placeholder="Total" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</div>
</div>
<div class="form-group">
<label>Amount Paid: </label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="form-control" id="amountPaid" placeholder="Amount Paid" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</div>
</div>
<div class="form-group">
<label>Amount Due: </label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="form-control amountDue" id="amountDue" placeholder="Amount Due" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</div>
</div>
</form>
</div>
</div>
<h2>Notes: </h2>
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<div class="form-group">
<textarea class="form-control" rows='5' id="notes" placeholder="Your Notes"></textarea>
</div>
</div>
</div>
<!-- End Here -->
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the bootstrap modal popup launcher button, which has id of the modal in the data-target property.
<button class="btn btn-lg btn-success text-center pull-right" data-toggle="modal" data-target="#modal-fullscreen">Create Invoice</button>
Here is the CSS to set Our Bootstrap Modal popup to full screen. This bootstrap modal popup also responsive one, because based on the viewport size it will automatically resize by itself.
/*
Full screen Modal
*/
.modal-fullscreen .modal-dialog {
margin: 0;
margin-right: auto;
margin-left: auto;
width: 100%;
}
@media (min-width: 768px) {
.modal-fullscreen .modal-dialog {
width: 750px;
}
}
@media (min-width: 992px) {
.modal-fullscreen .modal-dialog {
width: 970px;
}
}
@media (min-width: 1200px) {
.modal-fullscreen .modal-dialog {
width: 1170px;
}
}
Integrating jQuery UI autocomplete in the Bootstrap Modal Popup
Here I have integrated the jQuery UI autocomplete event to the textbox which has class of autocomplete_txt. So whenever user types something in the textbox which has class of autocomplete_txt, then autocomplete is event triggered. That will make ajax call to the mentioned URL.
Please refer following tutorial for detailed discussion of autocomplete integration.
Note : By default autocomplete options will append to body tag if you not specify appendTo option. To display autocomplete suggestions textbox in the Bootstrap modal popup we need to sepcify appendTo option to “#modal-fullscreen” (modal popup id).
//autocomplete script
$(document).on('focus','.autocomplete_txt',function(){
type = $(this).data('type');
if(type =='productCode' )autoTypeNo=0;
if(type =='productName' )autoTypeNo=1;
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[autoTypeNo],
value: code[autoTypeNo],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
appendTo: "#modal-fullscreen",
select: function( event, ui ) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
console.log(names, id);
$('#itemNo_'+id[1]).val(names[0]);
$('#itemName_'+id[1]).val(names[1]);
$('#quantity_'+id[1]).val(1);
$('#price_'+id[1]).val(names[2]);
$('#total_'+id[1]).val( 1*names[2] );
calculateTotal();
}
});
});
Also refer following this tutorial for dynamically add and removal of table rows using jQuery.
Crate ajax.php File To Handle jQuery autocomplete event Ajax Request:
First create config.php file, where we will keep all site wide configurations and database credentials.
<?php
/*
Site : http:www.smarttutorials.net
Author :muni
*/
define('DB_HOST', 'localhost');
define('DB_NAME', 'invoice');
define('DB_USERNAME','root');
define('DB_PASSWORD','');
$con = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if( mysqli_connect_error()) echo "Failed to connect to MySQL: " . mysqli_connect_error();
Now create ajax.php file and include that config.php file in it, also add the following php script that handle ajax request that comes from autocomplete event.
<?php
/*
Site : http:www.smarttutorials.net
Author :muni
*/
require_once 'config.php';
if(!empty($_POST['type'])){
$type = $_POST['type'];
$name = $_POST['name_startsWith'];
$query = "SELECT productCode, productName, buyPrice FROM products where quantityInStock !=0 and UPPER($type) LIKE '".strtoupper($name)."%'";
$result = mysqli_query($con, $query);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$name = $row['productCode'].'|'.$row['productName'].'|'.$row['buyPrice'];
array_push($data, $name);
}
echo json_encode($data);exit;
}
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
