An Autocomplete textbox allows the users to select the single value from the list. Here we will learn how we can autocomplete the multiple values from the auto-suggestion list. We will follow the following process to create an autocomplete textbox with multiple selection values in PHP.
title: "Jquery autocomplete multiple fields using jquery ajax PHP and MySQL."
tags: php
canonical_url: https://kodlogs.com/blog/188/jquery-autocomplete-multiple-fields-using-jquery-ajax-mysql
- First, create the MySQL database connection.
- GET parameter with the query name will help to get the search query.
- Send the GET parameter value to a PHP script using Ajax
- Search the match data from MYSQL database
- Store the search match data in an array.
- Send data in JSON format. Index.php
<!DOCTYPE html>
<html>
<head>
<title>AutoComplete Textbox with Multiple Field </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1 align="center">AutoComplete Textbox with Multiple Field using jQuery in PHP</h1>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="form-group">
<label>Enter Multiple subjects 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="subject_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(){
$('#subject_name').text($('#search_data').val());
});
});
</script>
Fetch.php
<?php
$data = array();
if(isset($_GET["query"]))
{
$connect = new PDO("mysql:host=localhost; dbname=courses", "root", "");
$query = "
SELECT subject_name FROM Subjects
WHERE subject_name LIKE '".$_GET["query"]."%'
ORDER BY subject_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);
?>
Top comments (0)