bootstrap-select
The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
--
-- Table structure for table `employee`
--
CREATE TABLE `employee` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`position` varchar(100) NOT NULL,
`office` varchar(100) NOT NULL,
`age` int(11) NOT NULL,
`salary` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `employee`
--
INSERT INTO `employee` (`id`, `name`, `position`, `office`, `age`, `salary`) VALUES
(1, 'Caite Ednalan', 'Accountant', 'Tokyo', 36, '5689'),
(2, 'Mark Oto Ednalan', 'Chief Executive Officer (CEO)', 'London', 56, '5648'),
(3, 'Jacob thompson', 'Junior Technical Author', 'San Francisco', 23, '5689'),
(4, 'cylde Ednalan', 'Software Engineer', 'Olongapo', 23, '54654'),
(5, 'Angelica Ramos', 'Software Engineer', 'San Francisco', 26, '5465'),
(6, 'Airi Satou', 'Integration Specialist', 'New York', 53, '56465'),
(8, 'Tiger Nixon', 'Software Engineer', 'London', 45, '456'),
(9, 'Airi Satou', 'Pre-Sales Support', 'New York', 25, '4568'),
(10, 'Angelica Ramos', 'Sales Assistant', 'New York', 45, '456'),
(11, 'Ashton updated', 'Senior Javascript Developer', 'Olongapo', 45, '54565'),
(12, 'Bradley Greer', 'Regional Director', 'San Francisco', 27, '5485'),
(13, 'Brenden Wagner', 'Javascript Developer', 'San Francisco', 38, '65468'),
(14, 'Brielle Williamson', 'Personnel Lead', 'Olongapo', 56, '354685'),
(15, 'Bruno Nash', 'Customer Support', 'New York', 36, '65465'),
(16, 'cairocoders', 'Sales Assistant', 'Sydney', 45, '56465'),
(17, 'Zorita Serrano', 'Support Engineer', 'San Francisco', 38, '6548'),
(18, 'Zenaida Frank', 'Chief Operating Officer (COO)', 'San Francisco', 39, '545'),
(19, 'Yuri Berry', 'Accountant', 'Tokyo', 38, '5468');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `employee`
--
ALTER TABLE `employee`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `employee`
--
ALTER TABLE `employee`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=20;
//index.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Mysql and Jquery Ajax Data Live Search Multi Select Dropdown</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<br />
<h2 align="center">PHP Mysql and Jquery Ajax Data Live Search Multi Select Dropdown</h2><br />
<select name="multi_search_filter" id="multi_search_filter" multiple class="form-control selectpicker">
<?php
include('dbcon.php');
$query = $conn->query("SELECT DISTINCT office FROM employee ORDER BY office ASC");
while ($row = $query ->fetch_object()) {
$office = $row->office;
echo '<option value="'.$office.'">'.$office.'</option>';
}
?>
</select>
<input type="hidden" name="hidden_country" id="hidden_country" />
<div style="clear:both"></div>
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
<th>Salary</th>
<th>Office</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br />
<br />
<br />
</div>
<script>
$(document).ready(function(){
load_data();
function load_data(query='')
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('tbody').html(data);
}
})
}
$('#multi_search_filter').change(function(){
$('#hidden_country').val($('#multi_search_filter').val());
var query = $('#hidden_country').val();
load_data(query);
});
});
</script>
</body>
</html>
fetch.php
//fetch.php
<?php
include('dbcon.php');
if($_POST["query"] != '') {
$search_array = explode(",", $_POST["query"]);
$search_text = "'" . implode("', '", $search_array) . "'";
$query = $conn->query("SELECT * FROM employee WHERE office IN (".$search_text.") ORDER BY id DESC");
}else{
$query = $conn->query("SELECT * FROM employee ORDER BY id DESC");
}
$total_row = mysqli_num_rows($query);
$output = '';
if($total_row > 0)
{
while ($row = $query ->fetch_object()) {
$salary = number_format($row->salary);
$output .= '
<tr>
<td>'.$row->name.'</td>
<td>'.$row->position.'</td>
<td>'.$row->age.'</td>
<td>$ '.$salary.'</td>
<td>'.$row->office.'</td>
</tr>';
}
}else{
$output .= '
<tr>
<td colspan="5" align="center">No Data Found</td>
</tr>
';
}
echo $output;
?>
dbcon.php
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
