Do you want to create text for AutoSuggest or AutoComplete? The AutoSuggest text message indicates how much you wrote in the text message and indicates that you have received the confirmation to confirm the confirmation. AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggestion AutoSuggest or AutoComplete specifies whether the script contains PHP, MySQL or Ajax, with SQL, MySQL, and SQLScripts with MySQL, SQL, and MySQL.
Now, in your mind, you will have a question: Light AutoSuggest. A question is asked and a description of the text and a description of the solo and the basis of the MySQL entry is made, as well as a complementary query and filtering of the data. The database and the result of the AutoSuggest process are displayed. So, here we have called this lightweight AutoSuggest or AutoComplete Textbox, because it only sends a request to the search box database.
In most AutoComplete or AutoSuggest tutorials, we sent a query to the MySQL database with Ajax in every character type and displayed the search result. In this tutorial, however, you only send an Ajax request to the Mysql database and then the data is sent filtered with jQuery and a website is displayed. To create this tutorial, we used the jQuery add-on "JsLocalSearch", a very light and fast jquery add-on, which is used to filter records on the client side and mainly to filter and search for an element used is provided. The main function is to search for HTML content we provide. Below is the source code of How to Build AutoSuggest Textbox with the Bootstrap Library using a PHP script with jQuery Ajax and the MySQL database.
Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `customer_table`
--
CREATE TABLE `customer_table` (
`customer_id` int(11) NOT NULL,
`customer_first_name` varchar(200) NOT NULL,
`customer_last_name` varchar(200) NOT NULL,
`customer_email` varchar(300) NOT NULL,
`customer_gender` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `customer_table`
--
ALTER TABLE `customer_table`
ADD PRIMARY KEY (`customer_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `customer_table`
--
ALTER TABLE `customer_table`
MODIFY `customer_id` int(11) NOT NULL AUTO_INCREMENT;
index.php
<!DOCTYPE html>
<html>
<head>
<title>How to Make AutoComplete Textbox with multiple fields using jquery ajax php</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="JsLocalSearch.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<style>
.mark {
background-color: #d7ffe7 !important
}
.mark .gsearch{
font-size: 20px
}
.unmark {
background-color: #e8e8e8 !important
}
.unmark .gsearch{
font-size: 10px
}
.marktext
{
font-weight:bold;
background-color: antiquewhite;
}
</style>
</head>
<body>
<br />
<br />
<div class="container">
<h3 align="center">How to Make AutoComplete Textbox with multiple fields using jquery ajax php</h3>
<br />
<br />
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" id="gsearchsimple" class="form-control input-lg" placeholder="Search..." />
<ul class="list-group">
</ul>
<div id="localSearchSimple"></div>
<div id="detail" style="margin-top:16px;"></div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#gsearchsimple').keyup(function(){
var query = $('#gsearchsimple').val();
$('#detail').html('');
$('.list-group').css('display', 'block');
if(query.length == 2)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('.list-group').html(data);
}
})
}
if(query.length == 0)
{
$('.list-group').css('display', 'none');
}
});
$('#localSearchSimple').jsLocalSearch({
action:"Show",
html_search:true,
mark_text:"marktext"
});
$(document).on('click', '.gsearch', function(){
var email = $(this).text();
$('#gsearchsimple').val(email);
$('.list-group').css('display', 'none');
$.ajax({
url:"fetch.php",
method:"POST",
data:{email:email},
success:function(data)
{
$('#detail').html(data);
}
})
});
});
</script>
fetch.php
<?php
//fetch.php;
$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");
if(isset($_POST['query']))
{
$query = "
SELECT DISTINCT customer_email FROM customer_table
WHERE customer_email LIKE '%".trim($_POST["query"])."%'
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
$output .= '
<li class="list-group-item contsearch">
<a href="javascript:void(0)" class="gsearch" style="color:#333;text-decoration:none;">'.$row["customer_email"].'</a>
</li>
';
}
echo $output;
}
if(isset($_POST['email']))
{
$query = "
SELECT * FROM customer_table
WHERE customer_email = '".trim($_POST["email"])."'
LIMIT 1
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '
<table class="table table-bordered table-striped">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Gender</th>
</tr>
';
foreach($result as $row)
{
$output .= '
<tr>
<td>'.$row["customer_first_name"].'</td>
<td>'.$row["customer_last_name"].'</td>
<td>'.$row["customer_email"].'</td>
<td>'.$row["customer_gender"].'</td>
</tr>
';
}
$output .= '</table>';
echo $output;
}
?>
If you followed the previous source code, you can learn how to build a compact dynamic AutoSuggest or Autocomplete text box using a PHP script with the Mysql, jQuery, and Ajax databases.
0 comments:
Post a Comment
Please don't enter any spam link in the comment box.