'Live search query using JS and PHP for QA forum

I am working on a QA forum using PHP and MYSQL. Now, I am creating an ask a question page like StackOverflow. In the input box when I enter a value then I get many related questions title from the database. This is working but not exact.

Let's start from the database - I have a QA posts table with columns like - title, slug, content, tags another category table.

My HTML Input box form with JQUERY -

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    function getStates(value) {
    $.post("search.php", {keywords:value},function(data){
        $("#results").html(data);
    }
    ); 
}
</script>
</head>
<center><input type="text" onkeyup="getStates(this.value)"/></center>
<br>
<center><div id="results"></div></center>
<body>
</body>
</html>

And my PHP code - search.php

 <?php
            $dbc=mysqli_connect("localhost", "root", "","test") or die(mysqli_connect_errno());
            $keywords = $_POST["keywords"]; 
        $words = explode(" ",$keywords);
            
            foreach ($words as $keywords) { 
                echo $keywords.'<br>';
                $sql="SELECT * FROM qa_posts WHERE title like '%".$keywords."%' OR content like '%".$keywords."%' OR tags like
    '%".$keywords."%' limit 10 "; 
             
            }
                $q=mysqli_query($dbc,$sql);
             while($res=mysqli_fetch_array($q)){
                echo "<a href='".$res['slug']."'>".$res['title']."</a><br>";
                } 
            ?>

As you can see, I have exploded every word from the string. I am getting question titles. like this - string ="enter image description here

but if give space for the next word, it starts from the beginning row of the question rather than searched words (It gives me the beginning row question title after giving space )-

enter image description here

How can I set that the searched question titles will be displayed related to keywords not from the beginning row of the table if I give space after any word? You can check the images above.

I have spent a full day on it.
Is this ok way or not? I want searching like stackoverflow - enter image description here Reference for other ways like StackOverflow or searching methods.

enter image description here



Solution 1:[1]

Try and Trim the words to remove whitespaces

foreach ($words as $keywords) { 
  echo $keywords.'<br>';
  $keyword = trim($keywords);
  if(strlen($keyword)>0){
    $sql="SELECT * FROM qa_posts WHERE title like '%".$keywords."%' OR content like '%".$keywords."%' OR tags like
    '%".$keywords."%' limit 10 "; 

  $q=mysqli_query($dbc,$sql);
  while($res=mysqli_fetch_array($q)){
   echo "<a href='".$res['slug']."'>".$res['title']."</a><br>";
  } 
 }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ochom Richard