Click here to Skip to main content
14,694,272 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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) { // DISPLAYS IN LIST WHILE TYPING
?>
<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
Posted
Updated 28-Mar-20 7:16am
v2

1 solution

A couple of ideas...
Try logging (console.log()) these items:
1. Have you tested that the .keyup function is firing?
2. Are you sure the keyword value is not empty?
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900