Main HTML inside <head>
(eg to check a student's nic from database and show complete nic and firstname if exist)
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#search-box").keyup(function(){
$.ajax({
type: "POST",
url: "quick_search.php",
data:'keyword='+$(this).val(),
beforeSend: function(){
$("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
},
success: function(data){
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background","#FFF");
}
});
});
});
function selectCountry(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
quick_search.php
<?php
require_once("../connection.php");
if(!empty($_POST["keyword"])) {
$query ="SELECT * FROM student WHERE nic like '" . $_POST["keyword"] . "%' ORDER BY nic LIMIT 0,6";
$result = mysqli_query($con, $query);
if(!empty($result)) {
?>
<ul id="country-list">
<?php
foreach($result as $country) {
?>
<li onClick="selectCountry('<?php echo $country["nic"]; ?>');"><?php echo $country["nic"]; ?>:<?php echo $country["fname"]; ?></li>
<?php } ?>
</ul>
<?php } } ?>
In the body
<input type="text" id="search-box" name="search-box" required placeholder="Enter NIC" size="60" name="nicpost" autocomplete="off" />
<div id="suggesstion-box" align="center"></div>
Subscribe to:
Post Comments (Atom)
Implemting Google Drive File Uploader using OAuth
Implementing Google Drive Text File Uploader using OAuth 2.0 Creating Project and Registering your API with Google In this part we wil...
-
What it is? AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM ...
-
Technology today is so evolving. The purpose of keyboard keys fulfilled by bananas. https://youtu.be/3LmaCkczLcU
-
Implementing Google Drive Text File Uploader using OAuth 2.0 Creating Project and Registering your API with Google In this part we wil...
No comments:
Post a Comment