In this post, We arg going to learn How to make Autocomplete Textbox with feature like selection of multiple option by using Bootstrap Tokenfield plugin with Ajax, PHP and dynamic Mysql data. We have already seen how Autocomplete textbox work with single option by using jQuery UI library, but here we will learn Autocomplete textbox with multi select feature. So, in this tutorial, we will make an example of Add multiple input tags with Autocomplete search result from Mysql database table using Bootstrap Tokenfield plugin with Ajax and PHP.
In web application, sometimes we have to required give feature like user can enter multiple input tags. At that time we have to require to use jQuery plugin for input multiple tags. But here also we want to make autocomplete textbox for enter multiple input tag. For this here we have use Bootstrap token field plugin, which is advanced tagging or tokenizing plugin for jQuery and Bootstrap library.
We all know Autocomplete Textbox which display the auto suggestion below input field, and user can allow to select value from pre populated search list. This type of feature help to user to search and pick the required value from auto suggested search result. Here when user has try to typing something in textbox and it has fetched respective data from Mysql database and it will display suggestion as dropdown under input textbox field. We can easily make dynamic autocomplete textbox by using jQuery UI library with PHP.
But generally autocomplete textbox has allow user to select single value from pre-populated list. But here want to allow user to select multiple value from auto-suggestion list from autocomplete textbox. Now in this tutorial, we have seen how to make autocomplete textbox in which user can select multiple items from the dynamic pre-populated list by using Aajx with PHP and Mysql database. Below you can find short process of create autocomplete textbox with multiple selection values in PHP.
- First Make Mysql Database connection
- Get the search query with GET parameter with name query
- Send GET parameter variable value to PHP script using Ajax
- Search match data from Mysql database in PHP script
- Store search match data into array
- Send data in JSON format to Ajax request
Source Code
index.php
<!DOCTYPE html>
<html>
<head>
<title>AutoComplete Textbox with Multiple Field using jQuery in PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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">
<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>
<br />
<br />
<div class="container">
<h1 align="center">AutoComplete Textbox with Multiple Field using jQuery in PHP</h1>
<br />
<br />
<br />
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="form-group">
<label>Enter Multiple Country Name</label>
<div class="input-group">
<input type="text" id="search_data" placeholder="" autocomplete="off" class="form-control input-lg" />
<div class="input-group-btn">
<button type="button" class="btn btn-primary btn-lg" id="search">Get Value</button>
</div>
</div>
<br />
<span id="country_name"></span>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#search_data').tokenfield({
autocomplete :{
source: function(request, response)
{
jQuery.get('fetch.php', {
query : request.term
}, function(data){
data = JSON.parse(data);
response(data);
});
},
delay: 100
}
});
$('#search').click(function(){
$('#country_name').text($('#search_data').val());
});
});
</script>
fetch.php
<?php
//fetch.php;
$data = array();
if(isset($_GET["query"]))
{
$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");
$query = "
SELECT country_name FROM apps_countries
WHERE country_name LIKE '".$_GET["query"]."%'
ORDER BY country_name ASC
LIMIT 15
";
$statement = $connect->prepare($query);
$statement->execute();
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row["country_name"];
}
}
echo json_encode($data);
?>
thanks for sharing..helps me alot
ReplyDeleteUnexpected token < in JSON at position 0
ReplyDeleteThanks for sharing such a useful article.
ReplyDeleteIf you already tagged a country, how to don't add duplicate tag?
ReplyDeleteHello Sir,
ReplyDeleteI have used your "AutoComplete Textbox with Multiple Field using jQuery in PHP" Code in my project and is working great but when I am using it in bootstrape model then the search result is not appearing below of the input field. While it's showing or may be not showing somewhere in the screen. Please, help me in order to use this with bootstrape model.
Thanks in Advance. Keep it up...
AutoComplete Textbox with Multiple Field using jQuery in PHP
ReplyDeleteTest
ReplyDeletehow to do this example in asp.net mvc c# instead of php?
ReplyDelete