Database
Create a new database named database2. In this database, create new table named
product as below:
--
-- Table structure for table `product`
--
CREATE TABLE `product` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`name` varchar(250) NOT NULL,
`price` double NOT NULL,
`status` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `product`
--
INSERT INTO `product` (`name`, `price`, `status`) VALUES
('Tivi 1', 4.5, 1),
('Tivi 2', 7.8, 0),
('Laptop 1', 11, 0),
('Laptop 2', 22, 1),
('Computer 1', 6.7, 1),
('Computer 2', 66, 1);
Database Connection
Connect to database2 database with default account:
Username: root
Password:
<?php
$conn = new PDO("mysql:host=localhost;dbname=database2", 'root', '');
?>
Index Page
Create new php file named index.php as below:
<?php require_once 'connect.php'; ?>
<html>
<head>
<title>AutoComplete with Multiple Selection Using Select2 in PHP-MySQL</title>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style type="text/css">
#autoCompleteSelect2 {
width: 600px;
}
</style>
<script>
$(document).ready(function() {
$('#autoCompleteSelect2').select2({
placeholder: 'Keyword...',
multiple: true,
ajax: {
type: 'GET',
url: 'search.php',
processResults: function(data) {
return {
results: $.map(data, function(item) {
return {
text: item.name,
id: item.id
}
})
};
}
}
});
});
</script>
</head>
<body>
<form method="post" action="result.php">
<select type="text" id="autoCompleteSelect2" name="ids[]"></select>
<br>
<input type="submit" value="Search">
</form>
</body>
</html>
Search Page
Create new php file named search.php as below:
<?php
require_once 'connect.php';
header('Content-Type: application/json; charset=utf-8');
if (isset($_GET['term'])) {
$stmt = $conn->prepare('select * from product where name like :keyword');
$stmt->bindValue('keyword', '%' . $_GET['term'] . '%');
$stmt->execute();
echo json_encode($stmt->fetchAll(PDO::FETCH_CLASS));
} else {
$stmt = $conn->prepare('select * from product');
$stmt->execute();
echo json_encode($stmt->fetchAll(PDO::FETCH_CLASS));
}
?>
Result Page
Create new php file named result.php as below:
<?php
require_once 'connect.php';
$ids = $_POST['ids'];
$qids = str_repeat('?,', count($ids) - 1) . '?';
$stmt = $conn->prepare('select * from product where id in (' . $qids . ')');
$stmt->execute($ids);
?>
<html>
<head>
<title>AutoComplete with Multiple Selection Using Select2 in PHP-MySQL</title>
</head>
<body>
<table border="1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Price</th>
<th>Status</th>
</tr>
<?php while ($product = $stmt->fetch(PDO::FETCH_OBJ)) { ?>
<tr>
<td><?= $product->id ?></td>
<td><?= $product->name ?></td>
<td><?= $product->price ?></td>
<td><?= $product->status ?></td>
</tr>
<?php } ?>
</table>
<a href="index.php">Back</a>
</body>
</html>
Demo
Index Page
Result Page
