Проблема предложения поиска AJAX/PHP
Итак, я работаю над страницей часто задаваемых вопросов, но мне хотелось бы сделать так, чтобы, когда пользователь вводит информацию, ajax в реальном времени отображал предложения, основанные на том, какие строки находятся в массиве.
Так что это то, что у меня есть до сих пор, но когда я запускаю сценарий. вообще ничего не происходит, и я никак не могу понять, чего мне не хватает.
Итак вот мой код:
Главная страница с полем поиска (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>
а это php-файл, который обрабатывает запрос (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) { // DISPLAYS IN LIST WHILE TYPING
?>
<li onClick="selectQuestion('<?php echo $question]; ?>');"> <?php echo $question; ?></li>
<?php } ?>
</ul>
<?php
}else{
}
} }
?>
Что я уже пробовал:
Я застрял на этом примерно на полчаса лол