Auto Suggestion(Auto Complete) Textbox Using Bootstrap PHP MySql Ajax And jQuery
Auto Suggestion (Auto Complete) textbox is important functionality for any website. Here we show you how without using any JQuery Auto complete Plugin you can able to create Auto Suggestion functionality in textbox. Here we are using Ajax, JQuery,Php Mysql and Bootstrap.
Let’s Start Coding.
(1). Create table in Database. Below we provide sample table computer_language with data.
--
-- Table structure for table `computer_language`
--
CREATE TABLE `computer_language` (
`id` int(11) NOT NULL,
`computer_language` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `computer_language`
--
INSERT INTO `computer_language` (`id`, `computer_language`) VALUES
(1, 'PHP'),
(2, 'JAVA'),
(3, 'DOT NET'),
(4, 'PYTHON'),
(5, 'RUBY & RAIL'),
(6, 'JAVA SCRIPT'),
(7, 'NODE JS'),
(8, 'ANGULAR'),
(9, 'ANGULAR JS'),
(10, 'REACT JS');
--
-- Indexes for dumped tables
--
-- Indexes for table `computer_language`
--
ALTER TABLE `computer_language`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
-- AUTO_INCREMENT for table `computer_language`
--
ALTER TABLE `computer_language`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
COMMIT;
(2). Create connection.php file for stable connection with Mysql Database.
<?php
error_reporting(0);
$mysql_hostname = "localhost"; # Enter Host Name
$mysql_user = "root"; # Enter User Name
$mysql_password = ""; # Enter Password
$mysql_database = "DATABASE_NAME"; # Enter Database name
$bd = ($GLOBALS["___mysqli_ston"] = mysqli_connect($mysql_hostname, $mysql_user, $mysql_password)) or die("Opps some thing went wrong");
mysqli_select_db( $bd, $mysql_database) or die("wrong");
?>
(3). Create File index.php.
<?php include_once('connection.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>Inflay.com | Auto Suggestion(Auto Complete) Textbox Using Bootstrap PHP MySql Ajax And jQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h3>Auto Suggestion(Auto Complete) Textbox Using Bootstrap PHP MySqli Ajax And jQuery</h3>
<br />
<form action="" method="post">
<div class = "row">
<div class="col-md-3">
<label for="country">Computer Language</label>
<input type = "text" class="form-control" id="computer_language" name="computer_language" value = "">
<div id="languages"></div>
</div>
</div>
</form>
</div>
</body>
</html>
<style>
ul{
background-color:#DAF7A6;
cursor:pointer;
}
li{
padding:10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(‘#computer_language’).keyup(function(){
var lang = $(this).val();
if(lang != ”)
{
$.ajax({
url:”auto_suggestion.php”,
method:”POST”,
data:{lang:lang},
success:function(data)
{
$(‘#languages’).fadeIn();
$(‘#languages’).html(data);
}
});
}
});
$(“#languages”).on(‘click’, ‘li’, function(){
$(‘#computer_language’).val($(this).text());
$(‘#languages’).fadeOut();
});
});
</script>
(4). Create File ,b>auto_suggestion.php , Here we run write query for finding match cases according key press by user.
<?php include_once('connection.php');
if (isset($_POST['lang']) && !empty($_POST['lang']))
{
$query = "SELECT computer_language FROM computer_language WHERE computer_language LIKE '%".$_POST["lang"]."%' LIMIT 5";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
$num_result = mysqli_num_rows($result);
$output = '<ul class="list-unstyled">';
if ($num_result > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .= '<li>'.$row["computer_language"].'</li>';
}
}
else
{
$output .= '<li>No Match Found</li>';
}
$output .= '</ul>';
echo $output;
}
?>
I hope this article helps you.
Thanks for visiting Inflay.com .