1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

AJAX/PHP search suggestion problem

Discussion in 'JavaScript' started by Johnnyx93, Mar 28, 2020.

0
  1. #1
    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>
    Code (markup):
    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{
       
    }
} } 
?>
    Code (markup):
     
    Johnnyx93, Mar 28, 2020 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    Are the tags look normal in your script? Here you have them as < and >
     
    qwikad.com, Mar 28, 2020 IP