PHP – Bootstrap autocomplete tokenfield with Ajax Example
In this post we will give you information about PHP – Bootstrap autocomplete tokenfield with Ajax Example. Hear we will give you detail about PHP – Bootstrap autocomplete tokenfield with Ajax ExampleAnd how to use it also give you demo for it if it is necessary.
In this post, i am share with you example of how to make tokenfield autocomplete with ajax in PHP. I will give you very simple example so you can easily use with your core PHP Project and other framework like Laravel, codeigniter etc.
Here in this example we use Bootstrap tokenfield plugin for tags ajax autocomplete. tokenfield plugin is advanced tagging/tokenizing plugin for jQuery and Twitter Bootstrap with a focus on keyboard and copy-paste support. tokenfield plugin also provide typeahead js for tags autocomplete, But it this example i use jquery ui for autocomplete ajax.
In this example i use following files for css and js that way we can make simple example:
1) bootstrap.min.css
2) jquery.min.js
3) jquery-ui.min.css
4) jquery-ui.min.js
5) bootstrap-tokenfield.min.css
6) bootstrap-tokenfield.js
Ok, so let’s follow to create just two php files and make example like as bellow preview:
Preview:
Before create two fies as example we have one “tags” table input your database like as bellow screen shot:
tags table
Create index.php File
<!DOCTYPE html>
<html>
<head>
<title>PHP - Bootstrap autocomplete tokenfield with Ajax Example</title>
<!-- Css Files-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
<!-- JS Files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
</head>
<body>
<div >
<input type="text" id="tokenfield" />
</div>
<script type="text/javascript">
$('#tokenfield').tokenfield({
autocomplete: {
source: function (request, response) {
jQuery.get("ajaxpro.php", {
query: request.term
}, function (data) {
data = $.parseJSON(data);
response(data);
});
},
delay: 100
},
showAutocompleteOnFocus: true
});
</script>
</body>
</html>
Create ajaxpro.php File
<?php
define (DB_USER, "root");
define (DB_PASSWORD, "root");
define (DB_DATABASE, "test");
define (DB_HOST, "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
$sql = "SELECT name FROM tags
WHERE name LIKE '%".$_GET['query']."%'
LIMIT 10";
$result = $mysqli->query($sql);
$json = [];
while($row = $result->fetch_assoc()){
$json[] = $row['name'];
}
echo json_encode($json);
?>
After created successfully both files, you can run by following command:
php -S localhost:8000
Now you can open your browser and run this link : http://localhost:8000
You can get more information about bootstrap tokenfield plugin from here : Tokenfield.
I hope it can help you…
Hope this code and post will helped you for implement PHP – Bootstrap autocomplete tokenfield with Ajax Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs