Hello
Evolving web technologies have led to the development of software that allows internet users to interact with the least number of mouse movements.
By using these software in the web sites we use in daily life, we are doing a lot of work in a very short time.
In one of these software, we write the phrases in the search form before searching for any information in the search engine. At this time, the search engine helps the user with automatic search completion software.
Thus, the information desired to be found will be found even sooner. In this section ** Search Autocomplete **, we will make a detailed application about the software.
Github URL: https://github.com/Nereli/jQueryPhpAutocomplete
Index.php
<!DOCTYPE html>
<html>
<head>
<title>jQuery & Php Autocomplete</title>
<meta charset="utf-8">
<style type="text/css">
*{
font-family: arial;
font-size: 15px;
}
.Word{
padding: 7px; border-radius: 3px; border: 1px dashed #666; width: 484px;
}
.Words{
display: block; text-decoration: none; padding: 5px; border-bottom: 1px dashed #ddd; cursor: pointer;
}
.Words:hover{
background-color: #efefef;
}
.SubmitButton{
width: 500px; margin-top: 5px; background-color: #e2eeff; cursor: pointer;
}
</style>
</head>
<body>
<form style="width: 500px; margin: auto;" method="post" action="Result.php">
<center><h2>Search Word</h2>center>
<input type="text" class="Word" name="Word" />
<div id="Future"></div>
<input type="submit" value="Search" class="Word SubmitButton" />
</form>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$("#Future").hide();
$("input[name=Word]").keyup(function(){
var Word = $(this).val();
if(Word.length > 1){
$("#Future").show();
$.post("Search.php",{"Word":Word},function(Datas){
var Results = "";
$.each(JSON.parse(Datas), function(index, value) {
var Data = '' + value + '';
Results = Results + Data;
});
$("#Future").html(Results);
});
}
});
function Done(thiss){
var Click = $(thiss).text();
$("input[name=Word]").val(Click);
$("#Future").hide();
}
</script>
</body>
</html>
Search.php
<?php
require('MysqliConnect.php');
$Datas = array();
if(isset($_POST['Word'])){
$Word = $_POST['Word'];
$Query = mysqli_query($MysqliConnect,"SELECT first_name FROM names WHERE first_name LIKE '$Word%' LIMIT 0,10");
while ($Querys = mysqli_fetch_array($Query)) {
$Datas[] = $Querys['first_name'];
}
}
$Result = json_encode($Datas);
echo $Result;
?>
Result.php
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<style type="text/css">
*{
font-family: arial;
font-size: 16px;
}
</style>
</head>
<body>
<center><h3>Searched Word: <span style="color: #ff4f4f"><?=$_POST['Word']?></span>h3></center>
</body>
</html>
Posted on Utopian.io - Rewarding Open Source Contributors