Okay so, Im working on a FAQ Page, but id like to make it so as the user is typing in information ajax will realtime display suggestions based on what strings are in the array.
So this is what i Have so far, but when i run the script. nothing happens at all and I cant seem to figure out what i am missing.
So here is my code:
Main Page with Search box (index.html)
<style>
body{width:610px;}
.frmSearch {border: 1px solid #a8d4b1;background-color: #c6f7d0;margin: 2px 0px;padding:40px;border-radius:4px;}
#country-list{float:left;list-style:none;margin-top:-3px;padding:0;width:190px;position: absolute;}
#country-list li{padding: 10px; background: #f0f0f0; border-bottom: #bbb9b9 1px solid;}
#country-list li:hover{background:#ece3d2;cursor: pointer;}
#search-box{padding: 10px;border: #a8d4b1 1px solid;border-radius:4px;}
</style>
<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: "readQuestions.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");
}
error: function() {
$("$search-box").css("background","red");
}
});
});
});
function selectQuestion(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
</head>
<body>
<center>
<h1>FAQ</h1><br>
<div class="frmSearch">
<input type="text" id="search-box" placeholder="Search term" />
<div id="suggesstion-box"></div>
</div>
</center>
</body>
</html>
and this is the php file that handles the request (readQuestions.php)
<?php
$questions = array(
'Happy Gilmore',
'The Fast and the Furious',
'Happy, Texas',
'The Karate Kid',
'The Pursuit of Happyness',
'Avengers: End Game',
'Happy Feet',
'Another Happy Day',
);
if(!empty($_POST["keyword"])) {
$keyword = $_POST['keyword'];
foreach( $questions AS $i ){
$test = stripos($i, $keyword);
if( $test !== false ){
$result[] = $i;
?>
<ul id="country-list">
<?php
foreach($result as $question) {
?>
<li onClick="selectQuestion('<?php echo $question]; ?>');"> <?php echo $question; ?></li>
<?php } ?>
</ul>
<?php
}else{
}
} }
?>
What I have tried:
Ive been stuck on this for like half hour lol
Submit an article or tip